CodeIgniter 4 DataTables Example Tutorial

DataTables JS is a third-party JS library that allows developers to display data in an HTML table along with some features like search, pagination, and sorting.

Let’s start to integrate dataTables js in project:

Step 1: Set Up CodeIgniter 4

Run the following command to install and set up codeIgniter 4 application in your system using composer:

composer create-project codeigniter4/appstarter codeigniter-datatables
cd codeigniter-datatables

Step 2: Create a Database and Table

To create a simple MySQL database and a users table to display data:

CREATE DATABASE ci4_datatables;

USE ci4_datatables;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100),
    phone VARCHAR(15),
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO users (name, email, phone) VALUES
('John Doe', '[email protected]', '1234567890'),
('Jane Smith', '[email protected]', '0987654321');
('Jane Lucy', '[email protected]', '0987654321');
('Jimmy Doe', '[email protected]', '0987654321');
('JACK kenith', '[email protected]', '0987654321');
('JACK jonhy', '[email protected]', '0987654321');
('joshan Lucy', '[email protected]', '0987654321');
('Elder Nick', '[email protected]', '0987654321');
('kelvin Smith', '[email protected]', '0987654321');
('Lucky Sam', '[email protected]', '0987654321');
('Luckman doe', '[email protected]', '0987654321');

Step 3: Set Up Database

Edit .env file in the root directory of your CodeIgniter project, and set up database details:

database.default.hostname = localhost
database.default.database = ci4_datatables
database.default.username = your_username
database.default.password = your_password
database.default.DBDriver = MySQLi

Step 4: Create a Model for Fetching Data

Create a model for interacting with the users table by running the following command:

php spark make:model UserModel

Edit the app/Models/UserModel.php file, and modify the file as follows:

<?php

namespace App\Models;

use CodeIgniter\Model;

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

Step 5: Create a Controller to Load Data

Run the following command to create a controller for load data into the view:

php spark make:controller UserController

Edit app/controllers/UserController.php file, and Modify the as follows:

<?php

namespace App\Controllers;

use App\Models\UserModel;

class UserController extends BaseController
{
    public function index()
    {
        return view('users');
    }

    public function fetchUsers()
    {
        $model = new UserModel();
        $data = $model->findAll();

        return $this->response->setJSON(['data' => $data]);
    }
}

Step 6: Create a View for Displaying Data

Create a view file named users.php in the app/Views directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataTables in CodeIgniter 4 - ItcodStuff.com</title>
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
</head>
<body>

<div class="container">
    <h1>Users List</h1>
    <table id="usersTable" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Created At</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function () {
        $('#usersTable').DataTable({
            "ajax": "<?= site_url('usercontroller/fetchUsers') ?>",
            "columns": [
                { "data": "id" },
                { "data": "name" },
                { "data": "email" },
                { "data": "phone" },
                { "data": "created_at" }
            ]
        });
    });
</script>

</body>
</html>

Step 7: Define Routes

Edit app/Config/Routes.php file to add routes for the UserController:

$routes->get('/', 'UserController::index');
$routes->get('usercontroller/fetchUsers', 'UserController::fetchUsers');

Step 8: Test Application

Now, you can run the application using the following command:

php spark serve

Visit http://localhost:8080 in your browser, and you should see the list of users displayed in a table with DataTables features like search, pagination, and sorting.