“Datatable.js” is a plugin for HTML table control free & easy way, Here “datatable.js” ajax server side demo for CodeIgniter framework of PHP. Just you need to prepare ajax call of pagination data and all things like page number, page limit, page offset, search pagination etc managed by “datatable.js”
Download code and configure on your local server.
Step 1. import datatable.sql to the local server
Step 2. Configure base_url and database connection of CodeIgniter project.
Views
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html> <head> <title>Datatable ajax server side demo</title> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> </head> <body> <button onclick="reloadTable()" style="font-size: 20px">Reload Data</button> <br> <br> <br> <table id="tableid"> <thead> <tr> <th>Name</th> <th>City</th> <th>Action</th> </tr> </thead> </table> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script type="text/javascript"> var table=$('#tableid').DataTable( { "aoColumnDefs": [{ "bSortable": false, "aTargets": [ 2 ] }], "processing": true, "serverSide": true, "ajax": { "url": "<?php echo base_url(); ?>index.php/welcome/ajax_call", "type": "POST", }, "aoColumns" : [ {"mData" : "CUST_NAME"}, {"mData" : "CUST_CITY"}, {"mData" : "action"}, ] }); function reloadTable() { table.ajax.reload(); } </script> </html> |
Controllers
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Welcome extends CI_Controller { /** * Index Page for this controller. * * Maps to the following URL * http://example.com/index.php/welcome * - or - * http://example.com/index.php/welcome/index * - or - * Since this controller is set as the default controller in * config/routes.php, it's displayed at http://example.com/ * * So any other public methods not prefixed with an underscore will * map to /index.php/welcome/<method_name> * @see https://codeigniter.com/user_guide/general/urls.html */ public function __construct() { parent::__construct(); ////////////DEFAULT LOAD BELOW FUNCTIONLITY WHEN CALL V1 CONTROLLER ///// LOAD MODEL CLASS $this->load->model('m_site'); ////// RESONSE HEADER CONTEN TYPRE SET FROM DEFAULT(TEXT/HTML) TO APPLICATION/JSON } public function index() { $this->load->view('v_welcome'); } public function ajax_call(){ $param=$_REQUEST; $response=$this->m_site->ajax_call($param); echo json_encode($response); } } |
Models
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<?php class M_site extends CI_Model { public function __construct() { parent::__construct(); date_default_timezone_set("GMT"); } function created() { return date("Y-m-d H:i:s"); } function ajax_call($requestData) { $columns = array( // datatable column index => database column name 0 =>'s.CUST_NAME', 1 =>'s.CUST_CITY', ); $this->db->select('CUST_CODE');//s.photo_no,s.photo_name' $this->db->from('customer as s');; $result = $this->db->get(); $totalData = $result->num_rows(); $totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows. $sql = "SELECT *"; $sql.=" FROM customer as s where 1=1 "; // getting records as per search parameters $isFilterApply=0; if( !empty($requestData['search']['value']) ){ //name $sql.=" AND ( s.CUST_NAME LIKE '".$requestData['search']['value']."%' "; $sql.=" OR s.CUST_CITY LIKE '".$requestData['search']['value']."%') "; $isFilterApply=1; } $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; // adding length $result1 = $this->db->query($sql); if($isFilterApply==1){ $totalFiltered = $result1->num_rows(); } // when there is a search parameter then we have to modify total number filtered rows as per search result. $row=$result1->result_array(); for ($i=0; $i < count($row); $i++) { $row[$i]['action']='<a class="btn btn-outline btn-primary" href="#">Edit</a> <a class="btn btn-outline btn-danger" >Delete</a>'; } $json_data = array( "draw" => intval( $requestData['draw'] ), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw. "recordsTotal" => intval( $totalData ), // total number of records "recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData "data" => $row // total data array ); return $json_data; } } |
More Stories
Clear cache in laravel
How to upload file in Bunny in Storage
How to upload file in Digitalocean in Spaces