How to do Ajax Pagination in Codeigniter

If you are not familiar with the term “pagination”, it refers to links that allows you to navigate from page to page. Ajax makes your application more flexible, you don’t need to reload or refresh the whole body for small changes, you can made changes in any part without loading page.

Jquery function call to get data in mysql table using Ajax.

var xhr;
function request_call(url,mydata)
{
    if(xhr && xhr.readyState != 4){
            xhr.abort();
    }

    xhr = $.ajax({
            url: url,
            type :'post',
            dataType: 'json',
            data : mydata,
    });
}

function orderhistorydata()
{
    request_call("<?=base_url();?>orderhistory/GetList","page="+1);
    xhr.success(function( mydata ) {
        $('#render_string').html(mydata.success);
        $('#pagi').html(mydata.pagi);
    });
}
orderhistorydata();

In avbove Request Call function (request_call) to call url in Controller.

public function GetList()
{
    $render_string = '';
    $pagi = '';
    $limit = 1;  
    if (!empty($this->input->post('page'))) 
    { 
        $page  = $this->input->post('page'); 
    } 
    else 
    { 
        $page=1; 
    }  
    $start_from = ($page-1) * $limit;  

    $responce['reponce'] = $this->Orderhistory_Model->get_data($start_from,$limit);
    $total_records = $this->Orderhistory_Model->get_count();
    $total_pages = ceil($total_records / $limit); 
    if (!empty($responce['reponce']))
    {
        foreach ($responce['reponce'] as $value) {
           $render_string.='<tr id="'.$value->user_id.'">'
            . '<td>'.$value->order_date.'</td>'
            . '<td>'.$value->shipping_address.'</td>'
            . '<td>'.$value->total_amt.'</td>'
            . '<td>'.$value->discount.'</td>';
           $render_string.= '</tr>';
        }

        if(!empty($total_pages))
        {
            $pagi.='<ul class="pagination" id="pagination">'
                    . '<li style="cursor: pointer;" id="1">First</li>';
                for($i=1; $i<=$total_pages; $i++)
                {
                    if($i == 1)
                    {
                       $pagi.=' <li class="activepagignation" style="cursor: pointer;" id="'.$i.'">'.$i.'</li>'; 
                    }
                    else
                    {
                        $pagi.=' <li class="" style="cursor: pointer;"  id="'.$i.'">'.$i.'</li>'; 
                    }
                }
            $pagi.='<li class="" style="cursor: pointer;" id="'.$total_pages.'">Last</li></ul>';
        }

    }
    else
    {
        $render_string.='<tr>'
            . '<td colspan="100%">No Record Found!!</td>'
            . '</tr>';
    }

    $data['pagi']=$pagi;
    $data['success']=$render_string;
    echo json_encode($data);
}

Controller to Model Call

function get_data($start_from,$limit)
{
    $this->db->select('*');
    $this->db->from('order_history');
    $this->db->order_by('order_date','DESC');
    $this->db->limit($limit,$start_from);
    $query = $this->db->get();
    return $query->result();
}

function get_count()
{
    $this->db->select('*');
    $this->db->from('order_history');
    $query = $this->db->get();
    return $query->num_rows();
}

Finally retrive data in Html page using json encode after than call pagination in jquery click event.

$('#pagi').delegate('#pagination li', 'click', function() {
    $("#pagination li").removeClass('activepagignation');
    $(this).addClass('activepagignation');
    var pageNum = this.id;
    request_call("<?=base_url();?>orderhistory/GetList","page="+pageNum);
    xhr.success(function( mydata ) {
        $('#render_string').html(mydata.success);
     });
});

Some css Code to format Pagination.

.pagination li
{
    border: 1px solid #ddd;
    color: #337ab7;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
}
.activepagignation {
    background-color: #337ab7;
    color: #ffffff !important;
}