Hello everyone 😁. Long time no writting to this blog. And sorry if I don’t reply so many comments. Because busy with other thing and jobs. (actually not busy. just pretending to be busy lol)
just let’s start.
I’ve created a library to make it easier to implement the server-side DataTable in codeIgniter4. I’ve share the code to GitHub . Here I want to make a small tutorial how to use. Maybe I will not too detail like previous article. But I’ll try as easy to understand as possible.
Requirement :
Database and Query :
In this tutorial I will use sample database same as before previous article. If you want to learn and use this database you can download sample data here : example.sql
Installing and Configuring CodeIgniter4
installing
If you have codeIgniter4 already installed. you can skip this step.
You can find the installation tutorial on Official CodeIgniter4 Documentation. Here I will use composer to install. On official CodeIgniter4 documentation you can choose installation by manual or git or use composer. It’s recommended use composer to easier installing another package and library.
configuring .env
Here I will use .env file to configure database connection. on root directory installation codeigniter you will find env file. rename this file env to .env (dot env)
open env file with text editor
change database config. Uncomment config with remove # character. here the example:
Installing CodeIgniter4-DataTables Library
Installing using composer (recommended):
installing using composer is recommended because it will install automatically. And also install dependency automatically if needed.
to installing library. write the command:
composer require hermawan/codeigniter4-datatablesInstalling manually
If you prefer not to use composer to install, we can install manually. First we must download library from git here. download latest release. in this tutorial we use v0.2.0. After download rename directory example named: CodeIgniter4-DataTables then place it to app/ThirdParty.
We also need download dependency. php-sql-parser on git. same on above. rename and place it to app/ThirdParty.
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' ];
more information about this library? visit GitHub or Official library documentation.
Source Code
This is complete example source code. simple, just use CodeIgniter query builder. Here documentation about CodeIgniter Query Builder.
Controllers
File: app/Controllers/Customers.php
<?php namespace App\Controllers;
use \CodeIgniter\Controller;
use \Hermawan\DataTables\DataTable;
class Customers extends Controller
{
public function index()
{
helper('url');
return view('customers_view');
}
public function ajaxDataTables()
{
$db = db_connect();
$builder = $db->table('customers')->select('firstName, lastName, phone, address, city, country');
return DataTable::of($builder)
->addNumbering() //it will return data output with numbering on first column
->toJson();
}
}
?>
simple? easy? just write a few lines of code.
Views
File: app/VIews/customers_view.php
<!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>Example Serverside DataTable Using CodeIgniter4-DataTable Library</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- DataTables CSS CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div class="container">
<h1 style="font-size:20pt">Example Serverside DataTable Using CodeIgniter4-DataTable Library</h1>
<h3>Customers Data</h3>
<table id="table" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Address</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Address</th>
<th>City</th>
<th>Country</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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></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('customers/ajaxDatatables')?>",
columnDefs: [
{ targets: 0, orderable: false}, //first column is not orderable.
]
});
});
</script>
</body>
</html>
Demo :
Download Full Source Code :
Download