CakePHP comes with a core JsHelper that allows a developer to call PHP functions that will create the JavaScript using a number of libraries including jQuery and Prototype. Pagination in CakePHP is a very common task and it can be enhanced using AJAX. Fortunately the Pagination component/helper are built to handle the AJAX. You can set the pagination defaults in the controller with the code below. Alternatively you could set specific elements of the array inside an action with a call like $paginate['conditions'] = array();
If you are looking for more information on how to submit an AJAX Form with CakePHP read this article AJAX Form Submit with CakePHP 2.x.
First, make sure you include the JsHelper and PaginatorHelper in your controller. You will also need the RequestHandler component for AJAX.
// AJAX Pagination tools
public $components = array('RequestHandler', 'Paginator');
public $helpers = array('Js' => array('Jquery'), 'Paginator');// Example pagination defaults
public $paginate = array(
'fields' => array(
'Node.id',
'Node.title',
),
'conditions' => array(
'Node.created > ' => '2013-28-02',
)
);Now that we have the controller prepared with the components and helpers we need, we can start working on our action. Pagination in the controller works just the same without AJAX as it does with AJAX. The only other thing to be wary of in the controller is setting an AJAX layout if it's an AJAX request otherwise falling back to the default page layout.
// Inside your action
$results = $this->paginate();
$this->set('results', $results);
// Also set the AJAX layout if needed
if ($this->request->is('ajax')) {
$this->render('myview', 'ajax'); // View, Layout
}Inside the view, we have some work to do with the JsHelper and the PaginatorHelper. The Paginator accepts an 'update' parameter which is used to specify which div gets the AJAX return results. Remember, the default AJAX template is empty, meaning it won't load any JS files specified in the default.ctp. Anything JS related inside the returned AJAX div will not work unless you reload the needed files. You can add them in your ajax.ctp layout or in the specific view.
// Inside the view
// If necessary, set the jQuery object for noconflict
$this->Js->JqueryEngine->jQueryObject = 'jQuery';
// Paginator options
$this->Paginator->options(array(
'update' => '#resultsDiv',
'evalScripts' => true,
));Let's assume we are going with a standard table output of the contents. We'd like the header of the table to have clickable labels for sorting. This is how you would output the links:
<?php echo $this->Paginator->sort('id', 'Result ID Number'); // field name, Label ?>That handles the sorting but if we want to adding paging as well we need to output the pager. There are a lot of options available with the pager. The most basic output is probably.
<?php echo $this->Paginator->numbers(); // Output clickable page numbers ?>That should be all there is to getting AJAX pagination working. CakePHP handles a lot of the work in the components and helpers. If you don't want to use the default named parameters to handle the values, you can use GET queries by setting the following in the PaginatorHelper:
$this->Paginator->options(array('convertKeys' => array('your', 'keys', 'here')));Things get a little trickier if you want to use AJAX sorting and pagination with a search form. You will have to include the search term in to the paginate settings one way or another. I can think of a few potential options including storing the term in the session (not a good one) to including the search term in the GET queries(which may require adding it as a convertKey to the PaginatorHelper.) If anyone has experience or ideas regarding AJAX sort/pagination using search I'd like to hear!
References: