AJAX Pagination in cakePHP having two different models in single page

We can use multiple models from controller but when we have to paginate by their headers and the data is from different models then we should set the URL for the headers and the response data should be placed differently.

Here we have two different Models Users, Roles in single Controller User Set Up.

User can have multiple Roles.

The User and Roles are displayed in single controller User Set Up(ex: different tabs or in different divs side-by-side). And If we want to paginator Using the Core libraries of the CakePHP It will take the default path.

The User Set Up loads both the User and Roles data by using set of different models.

Whe we set the Header with the Paginator in view we will use:

echo $this->Paginator->sort(‘first_name’,’First Name’);// this will take the default paginator controller and action of current controller from which it is called.

But the default action will again load the total User Setup page.(which we don’t want,we just want to load the Users data according to the Pagination).

Here there is 3 Step Process:

1) We should change the default controller and action to call.

2) Convert the call to AJAX call.

3)To replace the current data with the reponse Data.(User and Role Should be replaced accordingly).

First Step:
Change the Headers to use:

To make the paginator to call the corresponding controller and action we should replace the following

echo $this->Paginator->sort(‘first_name’,’First Name’);

With

echo $this->Paginator->sort(‘first_name’, ‘First Name’, array(‘url’=>array(‘controller’=>’users’,’action’=>’ajax_user’)));

Here the UsersController should be called and the ajax_user action should be performed.(the ajax_user.ctp will have the User corresponding data)

In the same way we have the Role:
echo $this->Paginator->sort(‘role_name’, ‘Role Name’, array(‘url’=>array(‘controller’=>’roles’,’action’=>’ajax_role’)));

Second Step:

To make the call as AJAX:

$(‘a[href*=/sort:],a[href*=/page:]’).live(‘click’, function(){
// Code for the Data from the response will loaded into corresponding html See Below how to load by JQuery load.
}

The above will make the call as Ajax.Keep it in javascript file and load the Js file from the view for corresponding page by:
echo $this->Html->script(array(‘Name_of_js_file’));

This I took it from the following link:
nik.chankov.net/2009/05/16/cakephp-ajaxed-pagination-and-sort/

Third Step:

To load into corresponding div of the User or Role by the href is:

$('a[href*=/sort:],a[href*=/page:]').live('click', function(){
        href = $(this).attr('href');
        if (href.match(/.*\/corresponding_action\/.*/i)) {
            $('#user_pagination_div').load($(this).attr('href'));
        }//corresponding_action:ajax_user for Users Pagination.
        else if (href.match(/.*\/corresponding_action\/.*/i)) {
            $('#role_pagination_div').load($(this).attr('href'));
        }//corresponding_action:ajax_role for Roles Pagination.
        return false;
    });

This will replace the corresponding div with the corresponding data from the User/Role.

Sandeep Thadvai , PHP Developer, Mindfire Solutions.

Author : Sandeep Thadvai

AJAX Pagination in cakePHP having two different models in single page

Leave a Reply

Subscribe With Us