CodeIgniter, jQuery, MySQL

(CodeIgniter 4) Server-side DataTables Library. Very easy with CodeIgniter4-DataTables Library

Hello everyone 😁. Long time no writting to this blog. And sorry if I don’t reply so many comments. Because busy with other thing and jobs. (actually not busy. just pretending to be busy lol)

just let’s start.

I’ve created a library to make it easier to implement the server-side DataTable in codeIgniter4. I’ve share the code to  GitHub . Here I want to make a small tutorial how to use. Maybe I will not too detail like previous article. But I’ll try as easy to understand as possible.

Requirement :

Database and Query :

In this tutorial I will use sample database same as before previous article. If you want to learn and use this database you can download sample data here : example.sql

Installing and Configuring CodeIgniter4


If you have codeIgniter4 already installed. you can skip this step.
You can find the installation tutorial on Official CodeIgniter4 Documentation. Here I will use composer to install. On official CodeIgniter4 documentation you can choose installation by manual or git or use composer. It’s recommended use composer to easier installing another package and library.

configuring .env

Here I will use .env file to configure database connection. on root directory installation codeigniter you will find env file. rename this file env to .env (dot env)

open env file with text editor

change database config. Uncomment config with remove # character. here the example:

Installing CodeIgniter4-DataTables Library

Installing using composer (recommended):

installing using composer is recommended because it will install automatically. And also install dependency automatically if needed.
to installing library. write the command:

composer require hermawan/codeigniter4-datatables

Installing manually

 If you prefer not to use composer to install, we can install manually. First we must download library from git here. download latest release. in this tutorial we use v0.2.0. After download rename directory example named: CodeIgniter4-DataTables then place it to app/ThirdParty.

We also need download dependency. php-sql-parser on git. same on above. rename and place it to app/ThirdParty.

then open app/Config/autoload.php. add namespace to $psr4 array. see the code below:

public $psr4 = [
	APP_NAMESPACE => APPPATH, // For custom app namespace
	'Config'      => APPPATH . 'Config',
	'PHPSQLParser'      	=> APPPATH .'ThirdParty/php-sql-parser/src/PHPSQLParser',
	'Hermawan\DataTables'   => APPPATH .'ThirdParty/CodeIgniter4-DataTables/src'

more information about this library? visit GitHub or Official library documentation.

Source Code

This is complete example source code. simple, just use CodeIgniter query builder. Here documentation about CodeIgniter Query Builder.


File: app/Controllers/Customers.php
<?php namespace App\Controllers;

use \CodeIgniter\Controller;
use \Hermawan\DataTables\DataTable;

class Customers extends Controller
	public function index()
		return view('customers_view');

	public function ajaxDataTables()
		$db = db_connect();
		$builder = $db->table('customers')->select('firstName, lastName, phone, address, city, country');
		return DataTable::of($builder)
			   ->addNumbering() //it will return data output with numbering on first column


simple? easy? just write a few lines of code.


File: app/VIews/customers_view.php
<!DOCTYPE html>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example Serverside DataTable Using CodeIgniter4-DataTable Library</title>

    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
	<!-- DataTables CSS CDN -->
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <div class="container">
        <h1 style="font-size:20pt">Example Serverside DataTable Using CodeIgniter4-DataTable Library</h1>
        <h3>Customers Data</h3>
        <table id="table" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>First Name</th>
                    <th>Last Name</th>
    <!-- jQuery CDN -->
    <script src=""></script>
    <!-- Bootstrap 4.5 CDN  -->
    <script src="" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <!-- DataTable CDN js -->
    <script src="" ></script>
    <script src="" ></script>
    <script type="text/javascript">

    $(document).ready(function() {
    		processing: true,
    		serverSide: true,
    		order: [], //init datatable not ordering
    		ajax: "<?php echo site_url('customers/ajaxDatatables')?>",
    		columnDefs: [
    			{ targets: 0, orderable: false}, //first column is not orderable.


Demo :

Preview Demo

Download Full Source Code :

You Might Also Like