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
$this->load->library(‘datatables’);
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
$this->datatables->output_data($processed_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
$this->datatables->set_config($config);
Once the configuration is set, you can use the library to output the data table.
// Output the data
$this->datatables->output_data($processed_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 https://codeigniter.com/download 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'; To 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.
CREATE DATABASE demo;
CREATE TABLE users (
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)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='demo database' AUTO_INCREMENT=1;
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-datatablesthen 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:
<?php
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()
{
helper('url');
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
->toJson();
}
}
?>
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>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- DataTables CSS CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" >
<link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
</head>
<body>
<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%">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>No</th>
<th>Name</th>
<th>Email</th>
</tr>
</tfoot>
</table>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- Bootstrap 4.5 CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- DataTable CDN js -->
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#table').DataTable({
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.
]
});
});
</script>
</body>
</html>
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->setDefaultController('UsersController');
$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:
http://localhost/demo/ OR http://localhost:8080/
Conclusion
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.
