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 https://codeigniter.com/download 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'; To public $baseURL = 'http://localhost/demo/';
Step 3 – Create Database and Table
Create a database and table by executing the following SQL query:
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
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:
<?php 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() { 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(); } } ?>
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> <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>
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->setDefaultController('UsersController'); $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:
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 4 Tutorial
- How to Install / Download Codeigniter 4 By Manual, Composer, Git
- How to Remove Public and Index.php From URL in Codeigniter 4
- Codeigniter 4 – Form Validation Example Tutorial
- How to add jQuery Validation on Form in Codeigniter 4 Example
- Codeigniter 4 Ajax Form Submit Validation Example
- Codeigniter 4 File Upload Validation Example
- Image Upload with Validation in Codeigniter 4
- Codeigniter 4 Image Upload Preview Using jQuery Example
- Codeigniter 4 Ajax Image Upload Preview Example
- How to Upload Multiple Images in Codeigniter 4
- Codeigniter 4 Multiple Image Upload with Preview
- Codeigniter 4 Pagination Example; Create Pagination in Codeigniter
- Simple Codeigniter 4 CRUD with Bootstrap and MySQL Example
- Codeigniter 4 CRUD with Datatables Example