AJAX Pagination :: Pagination :: Common Tasks With CakePHP :: The Manual :: 1.2 Collection

The Manual»Common Tasks With CakePHP»Pagination»AJAX Pagination

It's very easy to incorporate Ajax functionality into pagination. The only extra coding required is the inclusion of the the Prototype JavaScript library, setting the indicator (loading icon inside of DIV) and the specifying of a DIV to be updated (instead of reloading the page).

Do not forget to add the RequestHandler component to use Ajax calls to your controller:

var $components = array('RequestHandler');

var $components = array('RequestHandler');

If you include PaginatorHelper in your $helpers array, and want to use a specific JsHelper adapter, be sure to put Paginator after JsHelper. Failing to do so will cause JsHelper to use the default adapter which is jQuery.

4.9.3.1 Layout Changes

First, we'll include the Prototype library in the header, set up our status indicator image (spinner.gif), and set up our main content wrapper DIV, "content".

Here’s what a layout including those elements might look like (partially):

<head>
    <title><?php echo $title_for_layout; ?></title>
        <?php echo $javascript->link(array('prototype')); ?>
        <style type="text/css">
                div.disabled {
                        display: inline;
                        float: none;
                        clear: none;
                        color: #C0C0C0;
                }
        </style>
</head>
<body>
<div id="main">
        <div id="spinner" style="display: none; float: right;">
                <?php echo $html->image('spinner.gif'); ?>
        </div>
        <div id="content">
                <?php echo $content_for_layout; ?>
        </div>
</div>
</body>
</html>

<head>
<title><?php echo $title_for_layout; ?></title>
<?php echo $javascript->link(array('prototype')); ?>
<style type="text/css">
div.disabled {
display: inline;
float: none;
clear: none;
color: #C0C0C0;
}
</style>
</head>
<body>
<div id="main">
<div id="spinner" style="display: none; float: right;">
<?php echo $html->image('spinner.gif'); ?>
</div>
<div id="content">
<?php echo $content_for_layout; ?>
</div>
</div>
</body>
</html>

See comments for this section

4.9.3.2 View Changes

The only extra configuration for Ajax pagination is done using the options() method of the PaginationHelper, which specifies required Ajax parameters. In this case, we're specifying that all pagination links should update the element with the ID 'content' with the resulting data, and we want to show 'spinner' as the loading indicator.

If the ‘update’ key is not specifed, the PaginationHelper will output non-Ajax pagination sorting and paging links.

<?php 
//Sets the update and indicator elements by DOM ID
$paginator->options(array('update' => 'content', 'indicator' => 'spinner'));
 
echo $paginator->prev('<< Previous', null, null, array('class' => 'disabled'));
 
echo $paginator->next('Next >>', null, null, array('class' => 'disabled')); 
?>
 
<!-- prints X of Y, where X is current page and Y is number of pages -->
<?php echo $paginator->counter(); ?>

<?php
//Sets the update and indicator elements by DOM ID
$paginator->options(array('update' => 'content', 'indicator' => 'spinner'));
echo $paginator->prev('<< Previous', null, null, array('class' => 'disabled'));
echo $paginator->next('Next >>', null, null, array('class' => 'disabled'));
?>

<?php echo $paginator->counter(); ?>