CodeIgniter 4 Server Side DataTable Example
Codeigniter 23-Dec-2021

CodeIgniter 4 Server Side DataTable Example

CodeIgniter 4 server-side processing DataTable using jQuery ajax example; In this tutorial, you will learn how to create server side processing datatable in codeigniter 4 app using ajax with sorting, searching, filtering and pagination.

Note that, DataTables is a jQuery (Javascript library) based table advancement plug-in, It brings coherence in the data analysis process, ideally offers adding, sorting, pagination, and filtering abilities to plain HTML tables with minimal effort.

This tutorial will cover the following topics:

  • Integrate Datatables in codeigniter 4 app
  • Integrate jQuery and Bootstrap in codeigniter 4 app
  • Read data into MySQL DB
  • Display data in list using ajax
  • Server side datatable with sorting, searching and pagination

This tutorial will create a user list web application using server side processing datatables in CodeIgniter 4 example, as well as use Bootstrap 4 and dataTable js.

Datatables server side CodeIgniter 4 using Ajax

  • Download Codeigniter Latest
  • Basic Configurations
  • Create Database With Table
  • Setup Database Credentials
  • Installing CodeIgniter4-DataTables Library
  • Create Model and Controller
  • Create Views
  • Start Development server

Step 1 – Download Codeigniter Project

In this step, you will download the latest version of Codeigniter 4, Go to this link Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”

Step 2 – Basic Configurations

Next, you will set some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.

Set Base URL like this

public $baseURL = 'http://localhost:8080';
public $baseURL = 'http://localhost/demo/';

Step 3 – Create Database With Table

In this step, you need to create a database name demo, so let’s open your PHPMyAdmin and create the database with the name demo. After successfully create a database, you can use the below SQL query for creating a table in your database.

    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    name varchar(100) NOT NULL COMMENT 'Name',
    email varchar(255) NOT NULL COMMENT 'Email Address',
    PRIMARY KEY (id)
INSERT INTO `users` (`id`, `name`, `email`) VALUES
(1, 'Paul Bettany', ''),
(2, 'Vanya', ''),
(3, 'Luther', ''),
(4, 'John Doe', ''),
(5, 'Paul Bettany', ''),
(6, 'Vanya', ''),
(7, 'Luther', ''),
(8, 'Wayne Barrett', ''),
(9, 'Vincent Ramos', ''),
(10, 'Susan Warren', ''),
(11, 'Jason Evans', ''),
(12, 'Madison Simpson', ''),
(13, 'Marvin Ortiz', ''),
(14, 'Felecia Phillips', ''),
(15, 'Tommy Hernandez', '');

Step 4 – Setup Database Credentials

In this step, you need to connect our project to the database. you need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, you need to set up database credentials in this file like below.

public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'demo',
    'DBDriver' => 'MySQLi',
    'DBPrefix' => '',
    'pConnect' => false,
    'DBDebug'  => (ENVIRONMENT !== 'production'),
    'cacheOn'  => false,
    'cacheDir' => '',
    'charset'  => 'utf8',
    'DBCollat' => 'utf8_general_ci',
    'swapPre'  => '',
    'encrypt'  => false,
    'compress' => false,
    'strictOn' => false,
    'failover' => [],
    'port'     => 3306,

Step 5 – Installing CodeIgniter4-DataTables Library

To install datatable pluing by executing the following comamnd on terminal:

composer require hermawan/codeigniter4-datatables

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'

Step 6 – Create Model and Controller

So go to app/Models/ and create here one model. And you need to create one model name UserModel.php and update the following code into your UserModel.php file:

namespace App\Models;
use CodeIgniter\Model;
class UserModel extends Model
    protected $table = 'users';
    protected $primaryKey = 'id';
    protected $allowedFields = ['name', 'email'];

Create Controller

Now Go to app/Controllers and create a controller name UsersController.php. In this controller add the follwoing code:

<?php namespace App\Controllers;
use \CodeIgniter\Controller;
use \Hermawan\DataTables\DataTable;
class UsersController extends Controller
    public function index()
        return view('list');
    public function ajaxDataTables()
        $db = db_connect();
        $builder = $db->table('users')->select('name, email, id');
        return DataTable::of($builder)
               ->addNumbering() //it will return data output with numbering on first column

Step 7 – Create Views

Now you need to create one view files name list.php and update the following code into your file:

<!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">
    <!-- Bootstrap CSS CDN -->
    <link href="">
    <!-- DataTables CSS CDN -->
    <link href="" >
    <link href="">
    <div class="container">
        <h1 style="font-size:20pt"></h1>
        <h3>Customers Data</h3>
        <table id="table" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <!-- jQuery CDN -->
    <script src=""></script>
    <!-- Bootstrap 4.5 CDN  -->
    <script src=""></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('ajax-datatable')?>",
            columnDefs: [
                { targets: 0, orderable: false}, //first column is not orderable.

To define a route, So, visit app/Config/ directory and open Routes.php file. Then add the following routes into it:

// CRUD RESTful Routes
$routes->get('list', 'UsersController::index');
$routes->get('ajax-datatable', 'UsersController::ajaxDataTables');

Step 8 – Start Development server

Execute the following command into command prompt or terminal to start the codeigniter 4 application:

php spark serve

Then visit your web browser and hit the following url on it:





CodeIgniter 4 server side datatable example; In this tutorial, you have learned how to implement server side datatable in codeigniter 4 app.