- Add styling for bootstrap and datatables to our head.php
- Add Datatables script and datatables bootstrap script
- Create Database with category_master table for our example and add some data into it
- create category_m model in application/model with following function
- now in view page manage_category create table with some id and table must contain <thead> and <tbody> for datatables.
- Add follwing script for datatables
- Create a controller name Category with following methods
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
e.g.CREATE TABLE `category_master` (
`ID` int(11) NOT NULL,
`title` varchar(255) NOT NULL,
`status` text NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `category_master` ADD PRIMARY KEY (`ID`);
ALTER TABLE `category_master` MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT;
public function getCategory ( ) {
$Q=$this->db->GET('category_master');
return $Q;
}
e.g.<table class="table table-striped table-bordered table-hover" id="category-table">
<thead>
<tr>
<th><center>No.</center></th>
<th><center>Category Name</center></th>
<th><center>Status</center></th>
<th><center>Action</center></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
var dataTable = $('#category-table').DataTable ({
"pageLength" : 10,
"responsive" : true,
"ajax": {
url : "<?php echo base_url('Category/getData')?>",
type : 'GET',
},
aoColumns: [
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
/* Action */
{ "bSortable": false,mRender: function (data, type, row) {
return '<a href="<?= base_url() ?>Category/edit/'+row[3]+'" title="Edit"><i class="fa fa-edit fa-fw"></i></a>
<a href="#" title="delete" onclick="confirm_delete('+row[3]+')"><i class="fa fa-trash-o fa-fw"></i></a>
<a href="<?= base_url( )?>Category/details/' + row[3] + '"title="View"><i class="fa fa-eye"></i></i></a>'
}
},
],
"stripeClasses" : ['', '']
});
</script>
Note:: bSortable is used for custome setting for which column we want to sortable or which one is not.
class Category extends CI_Controller {
public function __construct ( ) {
parent::__construct ( );
$this->load->model('Category_m');
}
public function index ( ) {
$this->load->view('manage_category');
}
public function getData () {
// Datatables Variables
$draw = intval($this->input->get("draw"));
$start = intval($this->input->get("start"));
$length = intval($this->input->get("length"));
$categories = $this->Category_m->getCategory();
$data = array();
$no = 0;
foreach($categories->result() as $category) {
$no++;
$sub_array = array();
$sub_array[] =$no;
$sub_array[] =$category->title;
$sub_array[] =$category->status ? 'Active' : 'Inactive';
$sub_array[] =$category->id;
$data[] = $sub_array;
}
$output = array(
"draw" => $draw,
"recordsTotal" => $categories->num_rows(),
"recordsFiltered" => $categories->num_rows(),
"data" => $data
);
echo json_encode($output);
}