Ajax pagination in CodeIgniter : Best pattern to follow?

Question

I'm trying to replace a classic pagination system in a website developed with CodeIgniter, with a dynamic pagination with AJAX, but I'm not sure about the right way to do it and I'm very new to AJAX.

Current system

My page is like :

site.com/client/*

with * the offset to use for the query.
In my Client controller, index() is fetching 10 clients (and if parameter exists, then it starts fetching from it) from database and then loading the view in order to display data. It looks like this :

site.com/client/
site.com/client/10
site.com/client/20 
and so on

I want to move from this solution to an ajax-based solution in order to load the 10 next clients by hitting a button.

Let's say we have

An Ajax event Handler, called when the button is hit. It would send the current "offset" by checking the DOM.
A php file that would fetch data from database, like the index() method.
HTML template to display properly client's data.

How should I organize these files, considering the use of MVC pattern ? Examples will be highly appreciated.

Dacklf Dacklf · Accepted Answer · 2014-03-04T12:48:09

The plan is to have a '#trigger' button and a '#content' div in your view. Then, when you click the '#trigger', the jQuery handler is executed and it does the AJAX request, putting the result in the '#container'. One way to do that, very simply, is making the button to store a value, which you will increment by 10 on every click. The table in the database must have a field identifying somehow the display order in your page, i've named this field 'id'.

you can start with a controller, called client.php in your case:

function __construct() {
    parent::__construct();
}

function index() {

    $data['title'] = 'Client';  

    $this->load->view('templates/header', $data);

    //I try to keep scripts and views in different files,
    //but you can have just one view file with both codes.
    $this->load->view('client/client_script');
    $this->load->view('client/client_view', $data);

    $this->load->view('templates/footer', $data);
}

//this function will be called via ajax, when you click the button #trigger
function get() {
    if ( ! $this->input->is_ajax_request()) show_error('No direct access allowed');

    $start = $this->input->post('start');
    $this->load->model('client_model');

    $clients = $this->client_model->get($start);

    print_r($clients);
}

}

then, you need the view body ('client/client_view.php') which will contain your '#trigger' button and the '#content' div, simple as that:

<button id='trigger' value='1'>Click me for loading the next 10 objects</button>
<div id='content'>
</div>

of course, you need the jQuery handler ('client/client_script.php'):

<script type='text/javascript'>
    var data = {
        //I have enabled the csrf protection in my CodeIgniter,
        //so I need this var in every AJAX request
        csrf_test_name: '<?php echo $this->security->get_csrf_hash(); ?>'
    };

    $(document).on('click', '#trigger', function() {

        data['start'] = parseInt($(this).val());

        var posting = $.post('client/get', data);
        //success function
        posting.done( function(data) {
            $('#content').html(data);
        });
        $(this).val(data['start']+10);
    });
</script>

and finally, the model ('client_model.php'):

class Client_model extends CI_Model {

    function __construct() {
        parent::__construct();
    }

    function get($start) {
        $sql = "SELECT c.name
                FROM clients c
                WHERE c.id BETWEEN ? AND ?
                ORDER BY c.id";
        $query = $this->db->query($sql, array($start, $start+9));
        return $query->result_array();
    }
}

Hope it helps

Ajax pagination in CodeIgniter : Best pattern to follow?

Current system

Let's say we have

1 Answers