CodeIgniter 4 Server Side DataTable Example

CodeIgniter 4 server side datatable example; In this tutorial, i will show you how to implement server side datatable in codeigniter 4 app with sorting, searching, filtering and pagination.

If you want to display thousands of data in your codeigniter 4 app in few seconds and also you can view data without page refresh. For this, you can use server side datatable in codeigniter 4 app. So it will take you only condsse to display thousands of data 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.

Codeigniter 4 datatables server side tutorial; In this example, I will first install jquery datatable and then show a list on the web page using server side data with dataTable.

Codeigniter 4 Datatables Server Side Example

Use the below given steps to implement dataTable server side in Codeigniter 4 apps:

  • Install Codeigniter 4 Application
  • Basic App Configurations
  • Create Database and Table
  • Setup Database Credentials
  • Installing CodeIgniter4-DataTables Library
  • Create Model Class
  • Create Controller Class
  • Create Views
  • Setup Routes
  • Start Development server

Step 1 – Install Codeigniter 4 Application

First of all, you need to ownload the latest version of Codeigniter 4. So, visit this link Download Codeigniter 4 app and unzip the setup in your local system xampp/htdocs/ .

Note that, please change the download folder name “demo”.

Step 2 – Basic App Configurations

Now, you need to 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 and Table

Create a database and table by executing the following SQL query:


    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

To connect your codeigniter 4 app to the database. So, visit app/Config/ directory and open Database.php. Then add the databasae details like below into database.php file:

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'test',
        'password' => '4Mu99BhzK8dr4vF1',
        'database' => 'demo',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'development'),
        '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 Class

Create UserModel.php file. So, visit app/Models/ directory and create UserModel.php.Then add the following code into it:

namespace App\Models;
use CodeIgniter\Model;

class UserModel extends Model
    protected $table = 'users';
    protected $primaryKey = 'id';
    protected $allowedFields = ['name', 'email'];

Step 7 – Create Controller Class

Create UsersController.php file. So, visit app/Controllers directory and create UsersController.php.Then add the following code into it:

<?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

UserCrudController crud controller’s methods will work as follows:

  • The index() function renders the users list template into the view.
  • The ajaxDataTables() function fetch data into database using ajax.

Step 8 – Create Views

Create list.php view file, so visit app/views/ directory and create list.php file. Then add the following HTML into list.php 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.

Step 9 – Setup Routes

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');

Note that, the routes will be display data from server side on view.

Step 10 – 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 4 Tutorial

  1. How to Install / Download Codeigniter 4 By Manual, Composer, Git
  2. How to Remove Public and Index.php From URL in Codeigniter 4
  3. Codeigniter 4 Form Validation Example Tutorial
  4. How to add jQuery Validation on Form in Codeigniter 4 Example
  5. Codeigniter 4 Ajax Form Submit Validation Example
  6. Codeigniter 4 File Upload Validation Example
  7. Image Upload with Validation in Codeigniter 4
  8. Codeigniter 4 Image Upload Preview Using jQuery Example
  9. Codeigniter 4 Ajax Image Upload Preview Example
  10. How to Upload Multiple Images in Codeigniter 4
  11. Codeigniter 4 Multiple Image Upload with Preview
  12. Codeigniter 4 Pagination Example; Create Pagination in Codeigniter
  13. Simple Codeigniter 4 CRUD with Bootstrap and MySQL Example
  14. Codeigniter 4 CRUD with Datatables Example

Leave a Comment