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.
Conclusion
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.
