1.Codeigniter pagination with ajax
Controller
/** Load pagination library **/
$this->load->library('pagination');
/** initialize the config **/
$config['per_page'] = 20; /** per page records **/
$config['uri_segment'] = 3; /** in case your url has different please use proper uri segment**/
$config['cur_page'] = $this->uri->segment(3) ? $this->uri->segment(3): '1';
$config['full_tag_open'] = '<ul class="pagination">'; /** we will use this class for ajax call or you can customize pagination as you want**/
$config['full_tag_close'] = '</ul>';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="active"><a>';
$config['cur_tag_close'] = '</a></li>';
$config['next_tag_open'] = '<li class="next">';
$config['next_tag_close'] = '</li>';
$config['prev_tag_open'] = '<li class="prev">';
$config['prev_tag_close'] = '</li>';
$offset = $this->uri->segment(3);
if ($offset == 1 || $offset == '' || !intval($offset))
$offset = 0;
$offset ? $offset : 0;
$limit = $config['per_page'];
$q = "SELECT * FROM TABLE NAME "; /** change your query or use model **/
$query = $this->db->query($q);
$config['total_rows'] = $query->num_rows();/** COUNT OF TOTAL RECORDS IN DATABASE **/;
/** get your data **/
$q .= " LIMIT $offset, $limit";
$query = $this->db->query($q);
$data['data'] = $query->result();
$config['base_url'] = 'SITE_NAME/CONTROLLER_NAME/METHOD_NAME';
$this->pagination->initialize($config);
$data['links'] = $this->pagination->create_links(); /** this will create pagination links **/
$data['ajax'] = false;
if ($this->input->is_ajax_request()) {
/*** return only Table view if its ajax call **/
$data['ajax'] = true;
echo json_encode($this->load->view('manufacturer',$data,true));
}else{
$this->load->view('../template/header');
$this->load->view('manufacturer',$data);
$this->load->view('../template/footer');
}
view manufacturer
<?php if(!$ajax){?>
<div class="loadData">
}?>
<table id="showdata" class="table table-condensed table-bordered table-striped" style="width:50%">
<thead>
<tr>
<th>ID</th>
<th>Manufacturer</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php foreach($data as $k=>$v){?>
<tr><?php echo $v['id']?></tr>
<tr><?php echo $v['Manufacturer']?></tr>
<tr>Actions</tr>
<?php }?>
</tbody>
</table>
<?php if(!$ajax){?>
</div>
<?php }?>
/** This will show pagination link**/
<?php echo $links;?>
Javascript
/** now we will prevent pagination default functionality and make it as ajax **/
$(document).on('click','.pagination li a',function(e){
e.preventDefault();
url = $(this).attr('href');
$.ajax({
url:url,
type:json,
success :function(data){
$(".loadData").html(data);
}
});
})
- Pagination with datatable (serverside Ajax) and codeigniter.
Include js and css library of dataTable into html file
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
Your html look as below
<table class="table table-condensed table-bordered table-striped" id="example">
<thead>
<tr>
<th>ID</th>
<th>Manufacturer</th>
<th>Actions</th>
</tr>
</thead>
</table>
Now your ajax call
<script>
$(document).ready(function() {
$('#example').DataTable({
url: '<?php base_url(); ?>controllerName/index',
processing: true,
serverSide: true,
paging: true,
searching: true,
ordering: true,
order: [[0, "asc"]],
scrollX: true,
scroller: true,
columns: [{data: id"}, {data: "manufacturer"}, {data: "action"}]
});
});
</script>
Controller
public function index() {
if($this->session->userdata('is_logged_in')){
$data = array();
if ($this->input->is_ajax_request()) {
/** this will handle datatable js ajax call * */
/** get all datatable parameters * */
$search = $this->input->get('search');/** search value for datatable * */
$offset = $this->input->get('start');/** offset value * */
$limit = $this->input->get('length');/** limits for datatable (show entries) * */
$order = $this->input->get('order');/** order by (column sorted ) * */
$column = array('id', 'manufacturer');/** set your data base column name here for sorting* */
$orderColumn = isset($order[0]['column']) ? $column[$order[0]['column']] : 'parameter';
$orderDirection = isset($order[0]['dir']) ? $order[0]['dir'] : 'asc';
$ordrBy = $orderColumn . " " . $orderDirection;
if (isset($search['value']) && !empty($search['value'])) {
/** creat sql or call Model * */
/** I am calling sql directly in controller for your answer
* Please change your sql according to your table name
* */
$sql = "SELECT * FROM TABLE_NAME WHERE column_name '%like%'" . $search['value'] . " order by " . $ordrBy . " limit $offset,$limit";
$sql = "SELECT count(*) FROM TABLE_NAME WHERE column_name '%like%'" . $search['value'] . " order by " . $ordrBy;
$result = $this->db->query($sql);
$result2 = $this->db->query($sql2);
$count = $result2->num_rows();
} else {
/**
* If no seach value avaible in datatable
*/
$sql = "SELECT * FROM TABLE_NAME order by " . $ordrBy . " limit $offset,$limit";
$sql2 = "SELECT * FROM TABLE_NAME order by " . $ordrBy;
$result = $this->db->query($sql);
$result2 = $this->db->query($sql2);
$count = $result2->num_rows();
}
/** create data to display in dataTable as you want **/
$data = array();
if (!empty($result->result())) {
foreach ($result->result() as $k => $v) {
$data[] = array(
'id' => $v['id'],
'manufacturer'=>$v['manufacturer'],
'actions' => "<a href=''><strong>Edit</strong></a>"
);
}
}
/**
* draw,recordTotal,recordsFiltered is required for pagination and info.
*/
$results = array(
"draw" => $this->input->get('draw'),
"recordsTotal" => count($data),
"recordsFiltered" => $count,
"data" => $data
);
echo json_encode($results);
} else {
/** this will load by default with no data for datatable
* we will load data in table through datatable ajax call
*/
$this->load->view('../template/header');
$this->load->view('manufacturer',$data);
$this->load->view('../template/footer');
}
}else{
redirect('main/restricted');
}
}
Datatable will create your pagination.
