Server Side DataTable in CodeIgniter 4

CodeIgniter 4 provides a library for server-side processing of data tables. The library is called DataTables and it is available in the CodeIgniter 4 application/libraries folder.

To use the library, you need to include the library in your controller.

// Load the DataTables library

Once the library is loaded, you can use the library to process the data table. The library provides several methods to process the data table.

// Get the data from the database
$data = $this->datatables->get_data();

// Process the data
$processed_data = $this->datatables->process_data($data);

// Output the data

The library also provides several configuration options to customize the data table.

// Set the table configuration
$config = array(
‘columns’ => array(‘name’, ’email’, ‘phone’),
‘order_by’ => array(‘name’ => ‘asc’)

// Set the table configuration

Once the configuration is set, you can use the library to output the data table.

// Output the data

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

By using the following steps, you can setup and use server-side rendering in DataTable with CodeIgniter 4 projects:

  • Step 1 – Setup Codeigniter Project
  • Step 2 – Basic Configurations
  • Step 3 – Create Database With Table
  • Step 4 – Setup Database Credentials
  • Step 5 – Installing CodeIgniter4-DataTables Library
  • Step 6 – Create Model and Controller
  • Step 7 – Create Views
  • Step 8 – tart Development server

Step 1 – Setup 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', '[email protected]'),
(2, 'Vanya', '[email protected]'),
(3, 'Luther', '[email protected]'),
(4, 'John Doe', '[email protected]'),
(5, 'Paul Bettany', '[email protected]'),
(6, 'Vanya', '[email protected]'),
(7, 'Luther', '[email protected]'),
(8, 'Wayne Barrett', '[email protected]'),
(9, 'Vincent Ramos', '[email protected]'),
(10, 'Susan Warren', '[email protected]'),
(11, 'Jason Evans', '[email protected]'),
(12, 'Madison Simpson', '[email protected]'),
(13, 'Marvin Ortiz', '[email protected]'),
(14, 'Felecia Phillips', '[email protected]'),
(15, 'Tommy Hernandez', '[email protected]');

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="[email protected]/dist/css/bootstrap.min.css">
    <!-- 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="[email protected]/dist/js/bootstrap.bundle.min.js"></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.

Recommended Codeigniter Posts

If you have any questions or thoughts to share, use the comment form below to reach us.


Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.


Jassweb, Rai Chak, Punjab, India. 143518
Item added to cart.
0 items - 0.00