create jquery pagination?

I need to implement jQuery pagination in CodeIgniter.

I've read some posts on CodeIgniter forum and CodeIgniter AJAX Pagination Example/Guideline. People on CI forum suggest using a solution from TOHIN's blog, but I can't understand how it could be done. Could someone give me an example?

Also, could someone explain, what $this->load->model('model') means here.

My code:

function show() 
    {
    $this->load->library('Jquery_pagination');

        $this->admin_model->header();

        $this->load->library('pagination');

        $config['base_url'] = 'show';
        $config['total_rows'] = '200';
        $config['per_page'] = '2'; 
        $this->pagination->initialize($config); 
        $data['pagination'] = $this->pagination->create_links();

        $data['query_select'] = $this->db->query('SELECT @rownum:=@rownum+1 rownum, t.* FROM (SELECT @rownum:=0) r, hotel_submits t order by id desc');

        $this->load->view('admin/accommodation_submit_show', $data);   
    }

With respect

The code you are looking at in the Codeigniter forums is using progressive enhancement. What that means is that the code works just as well without javascript (although with a page refresh).

So, the first step for you is to make your pagination work with javascript off, and then you'll be able to add the AJAX functionality.

Now, the way pagination works is that you use SQL's LIMIT in your query to limit the results per query. LIMIT takes 2 values, the offset and the amount, as follows: if you want to show 2 rows per page, you'll query the database with LIMIT 0, 2. This means "start with the first row, and give me 2 rows in total". Then, for the next page, you do your query with LIMIT 2, 2, which means "start with the third row (2 is the third row - it's a zero based index) and give me 2 rows in total".

You'll do this with every query, so that the next query will have LIMIT 4, 2, and so on and so forth. As you can see, the only thing that changes from one query to the next is the offset (which row to start the query from).

Now, the way the Codeigniter Pagination class works, is that it puts the offset to each page within the links that it generates with $this->pagination->create_links(). Where does the offset go? That's determined by $config['uri_segment'], but by default it's set to 3. Since you have not provided your full code, I do not know what your controller is called. Let's assume it's called hotels. So, you have to set $config['base_url'] = 'hotels/show';. As you can see, your first URI segment is hotels, the second one is show, and the third one would be the offset that the Pagination class has generated for you.

How do you get to that offset? I'm glad you asked. By simply having your show method take an argument, Codeigniter will pass it the 3rd URI segment. So we get the following:

function show($offset = 0) 
{
    $this->load->library('pagination');

    $config['base_url'] = 'hotels/show'; // Change this to your controller name
    $config['total_rows'] = '200'; // In reality, this should be the actual number of rows in your table
    $config['per_page'] = '2'; 

    $this->pagination->initialize($config); 
    $data['pagination'] = $this->pagination->create_links();

    $offset = (int) $offset; // just to make sure nothing funky gets in here
    $data['query_select'] = $this->db->query("SELECT @rownum:=@rownum+1 rownum, t.* ".
        "FROM (SELECT @rownum:=0) r, hotel_submits t ".
        "ORDER BY id desc LIMIT $offset, 2");
    // I just split it into lines so that SO doesn't make you scroll too much :-)

    $this->load->view('admin/accommodation_submit_show', $data);   
}

Now your pagination links should work as advertised, but they'll do a complete page refresh. To get around that, do this:

$(function() {
    // Assuming your pagination links
    // are in a div with ID of pagination,
    // and that you want to paginate a table with ID of paginate
    $('#pagination a').live('click', function() {
        $.get( $(this).attr('href'), function(html) {

            $('table#paginate').replaceWith( $(html).find('table#paginate') );
            $('#pagination').replaceWith( $(html).find('#pagination') );
        });
        return false;
    });
});

All of this should work. However, we can improve upon this. In the code's current state, we are getting the html for the full page with each click, and just filtering out what we want. Although this works, there's no need to send so much extra information that is not needed.

What they're doing on the forums there, is creating another controller specifically tailored for these ajax requests, so that it'll only serve the relevant table html and nothing more.

If you need help with that, let me know.