AJAX Pagination in Codeigniter

Question

Can someone help me with a simple AJAX pagination in Codeigniter using JQuery? i am retrieving array of rows and i dont know how to paginate it.My AJAX response will be multiple rows and i want to display them in rows of 10 for per page.Kindly help me through.

MY view file

<script>
$(document).ready(function(){
$("#getreport").click(function(){
 var fromdate = $('#date1').val();
 var todate = $('#date2').val();
 $("#header").css("visibility", "visible");
 $("#bodycontent").empty();
 $("#bodycontent").html('<div id="subcontent"></div>');
 data =
{
"from"  : fromdate,
"to" : todate
} 
$.post('<?=site_url("report_controller/managesuppliers_report"); ?>', data  ,function (result) {
for(i=0;i<result["count"];i++){
$('#subcontent').after(
' <tr class="style"> '+
' <td><img src="<?php echo base_url(); ?>/uploads/images/' +result["records"]  [i]["picture"] + '" width="30px" height="30px"></td> '+
' <td>' +result["records"][i]["suppliername"] + '</td> '+
' <td>' +result["records"][i]["contactperson"] + '</td> '+
' <td>' +result["records"][i]["mobilenumber"] + '</td> '+
' <td>' +result["records"][i]["phone"] + '</td> '+
' <td>' +result["records"][i]["email"] + '</td> '+
' </tr> ');
}
});     
});
});
</script>
<div class="panel" id="header" style="visibility: hidden;">
<div class="panel-heading">
<span class="panel-title"></span>
</div>
<div class="table-responsive">
<table class="table allcp-form theme-warning fs13">
<thead>
<tr class="bg-light">
<th class="">Image</th>
<th class="">Supplier Name</th>
<th class="">Contact Person</th>
<th class="">Mobile Number</th>
<th class="">Phone</th>
<th class="">Email</th>
<th class=""></th>
</tr>
</thead>
<tbody id="bodycontent">

</tbody>
</table>
</div>
</div>

My Controller File

public function managesuppliers_report()
{ 
$query = $this->reportmodel->report_select($this->input->post('from'),$this->input->post('to'));
$data['records'] = $query['records'];
$data['count'] = $query['count']; 
$this->output->set_content_type('application/json');
$this->output->set_output(json_encode($data));
return $data;
}

My Model File

public function report_select($date1,$date2)
{
$this->db->where('date >=', $date1);
$this->db->where('date <=', $date2);
$query=$this->db->get('suppliers');
$row = $query->result();
return array(
'records' => $row,
'count' => count($row));
 }

Answer 1

Make function in helper for get offset :

function getoffset($page=1,$per_page_val=10){
   if ( $page == 1)
   {
      $offset = 0;
   }
   else
   {
      $offset = ($page - 1) * $per_page_val;
   }
   return $offset;
}

Now if you click 1st page or 2nd page, pass parameter for page value to controller,

Now main controller, if 2nd page, So $page = 2, and you want to 10 records, $per_page_val = 10.

$offset = getoffset($page,$per_page_val);

Now we can two ways, You can use array_slice,

$recordsArr = array_slice($records,$offset,$per_page_val);

OR

You can use Limit and offset in query, In Model,

$this->db->limit($per_page_val, $offset);

I hope it will help you.

Answer 2

Firstly you need to fetch how many records are present in table.

        $total_records = $this->db->count_all('table_name');
        $item_per_pg = 10;  
        if ($total_records > 10)    
    {
          $total_pages = ceil($total_records / $cat_per_pg);

        echo "<ul class='pagination' id='disp_pagination_links'>";
                echo "<li id='0' class='item_prev'><a> &laquo; </a></li>";
                for ($page = 1; $page <= $total_pages; $page++) {
                    echo "<li id='" . $page . "'><a>" . $page . "</a></li>";
                }
    echo "<li id='2' class='cat_next'><a> &raquo; </a></li>";


    }  
// In above code we have created pagination links.

Now add button click event as follows-

    $(document).on('click', '#disp_cat_data_pagi li', function () 
{  
 var page_no = $(this).attr('id'); // Get page no as id and send it to php  

    $.ajax({
            url: base_url + 'disp_records',
            type: 'post',
            data: {page_no: page_no},
            success: function (data) {
                $('#disp_records').html(data);

});

controller

public function disp_records()
{
$page = $this->input->post('page_no');
$page -= 1;
            $per_page = 10;
            $start = $page * $per_page;
            $data = $this->model_name->model_function($start, $per_page);
}  

and finally fire select query in model as follow-

public function model_function()
{
   $this->db->select("*");
        $this->db->from("table_name");
        $this->db->limit($per_page, $start);
        $query = $this->db->get();
        return $query->result();
}

I hope it will help you.