In previous codeigniter tutorial, Now we have action method in controller file which will fetch records from MySQL table using model method.
I am extending Part I tutorial of Datatable with Sorting,Searching and Pagination.We will create HTML view file and bind employee records data with jquery Datatable.
I will use some jQuery code to instantiate jQuery Datatable on target HTML table.I will also configure some jQuery Datatable parameters like sorting columns,url which will action method to access records, HTTP method POST/GET and data type JSON.
Step 5: Create employee.php in views/ folder, We will define all HTML layout in this 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>Simple Example of ServerSide jQuery Datatable</title>
<link href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 style="font-size:20pt">Simple Example of ServerSide jQuery Datatable</h1>
<table id="table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Salary</th>
<th>Age</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>No</th>
<th>Name</th>
<th>Salary</th>
<th>Age</th>
</tr>
</tfoot>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
</body>
</html>
We have added jQuery datatables library into above file, Now we will call jQuery Datatable method on above '#table' table.
var table;
$(document).ready(function() {
//datatables
table = $('#table').DataTable({
"processing": true, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' servermside processing mode.
//"order": [], //Initial no order.
"iDisplayLength" : 10,
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo site_url('/employee/ajax_list')?>",
"type": "POST",
"dataType": "json",
"dataSrc": function (jsonData) {
return jsonData.data;
}
},
//Set column definition initialisation properties.
"columnDefs": [
{
"targets": [ 0 ], //first column / numbering column
"orderable": false, //set not orderable
},
],
});
});
above code instantiated datatable on table and configured required parameters for listing.
We have created database connection with mysql.We learnt about how to create controller, model and view file into CodeIgniter.We have integrated jQuery datatable listing with sorting, searching and pagination using Ajax.
You can download source code from below link.
in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More
in this Laravel tutorial, I will explore common practices for using the Laravel Blade template with examples. Blade is a… Read More