how to implement ajax pagination in codeigniter?

Question

controller: Test.php

<?php
    defined('BASEPATH') OR exit('No direct script access allowed');
    class Test extends CI_Controller 
    {
        function __construct() 
        {
            parent :: __construct();
            $this->load->helper(array('form', 'url'));
            $this->load->model('dependent_field'); 
        }
        public function index()
        {
            $this->load->view('index');          
        }

        public function get_exam_college($offset=null)
        {
          $this->load->library('table');
          $this->load->library('pagination');

          $field=$this->input->post('field');

          $config['base_url'] = base_url().'test/';
          $config['total_rows'] = $this->dependent_field->count_field_exam($field);
          $config['per_page'] = 10;
          $config['full_tag_open'] = '<ul class="pagination" id="search_page_pagination">';
          $config['full_tag_close'] = '</ul>';
          $config['cur_tag_open'] = '<li class="active"><a href="javascript:void(0)">';
          $config['num_tag_open'] = '<li>';
          $config['num_tag_close'] = '</li>';
          $config['cur_tag_close'] = '</a></li>';
          $config['first_link'] = 'First';
          $config['first_tag_open'] = '<li>';
          $config['first_tag_close'] = '</li>';
          $config['last_link'] = 'Last';
          $config['last_tag_open'] = '<li>';
          $config['last_tag_close'] = '</li>';
          $config['next_link'] = FALSE;
          $config['next_tag_open'] = '<li>';
          $config['next_tag_close'] = '</li>';
          $config['prev_link'] = FALSE;
          $config['prev_tag_open'] = '<li>';
          $config['prev_tag_close'] = '</li>';
          $config['page_query_string'] = FALSE;
          $this->pagination->initialize($config);

          $data['field'] = $this->dependent_field->field_exam_college($field,$config['per_page'],$offset);
          $this->load->view('exam-colleges',$data);
        }
    }

view: exam-colleges.php

<?php
    foreach ($field as $fetch) 
    {
?>  
    <p><?php echo $fetch['college_name']; ?></p>
<?php   
    }
?>
<div id="body">
    <?php
        echo $this->pagination->create_links();
    ?>
</div>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('body').on('click','ul#search_page_pagination>li>a',function(e){
        e.preventDefault();
        var Pagination_url = $(this).attr('href');
            $.ajax({
                url:Pagination_url,
                type:'POST',
                success:function(data){
                    var $page_data = $(data);
                    $('#container').html($page_data.find('div#body'));
                    $('table').addClass('table');
                }
            });
        });
    });
</script>

model: Dependent_field.php

<?php  
   class Dependent_field extends CI_Model  
   {  
        function __construct()  
        {   
            parent::__construct(); 

        public function count_field_exam($field)
        {
            $this->db->select('*');
            $this->db->from('all_colleges');
            $where = "field = '$field'";
            $this->db->where($where);
            $query = $this->db->get();
            return $query->num_rows();
        }

        public function field_exam_college($field,,$limit,$start)  
        {    
            $this->db->select('*');
            $this->db->from('all_colleges');
            $where = "field = '$field'";
            $this->db->where($where);
            $this->db->limit($limit,$start);
            $query = $this->db->get();
            $result = $query->result_array();
            return $result;  
        }
    } 

I have an index file in test controller where I have a dropdown with submit button when I am click on submit button then the result are showing from exam-colleges.php file and pagination are also showing but when I click on pagination button then page reload which I don't want. So, How can I use ajax pagination in codeigniter ?Please help me.

Thank You

Answer 1

Please note one thing that pagination works using method="GET".

For ajax

In View:

   <input type="hidden" name="page" id="page" value="10"> // initially it contain  the value which is equal to config['per_page'] 

ajax request :

                 $.ajax({
                        url:'', // your url
                        type:'GET',
                        dataType: 'json', // Im using json as type in ajax request
                        data:{
                            page :$('#page').val();
                            //you can add more data here for your get request
                        },
                        success :function(data)
                          $('#page').val(data.offset); //upadte page by new offset from the controller

                         // append or add the result data to the page
                        },
                        error: function () {
                            alert("ERROR");
                        }

                    })  

In controller

$page =$this->input->get('page');
//pagination configs here
$data['offset'] =  $page + 10; //10 is $config['per_page']
$data['result'] = $this->YourModel->yourFunction($config["per_page"], $offset);
echo json_encode($data); // Im using json as type in ajax request

in Model :

 public function yourFunction($limit,$start)
 {
    $this->db->select('*');
    $this->db->limit($limit,$start);
    $query = $this->db->get('table_name');
    return $query->result();
}