Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

How to Ajax Pagination in Codeigniter

by
Category:codeigniter
ajax codeigniter
How to 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;
}

In above tutorial teach you How to Pagination in Codeigniter and another tutorial see How to Ajax Pagination in Laravel 5.


0 Comments


Html code work in comment box


Related Post