Adding required helper + component
In order to easily do ajax pagination, we’re going to start off by adding:Show Plain Text
to our controller, this will set us up to use the mootools adapter in the
JsHelper and the
RequestHandler for automatic disabling of layouts on ajax requests.
Prepare the layout.
In order to use mootools, we’ll need to add it to our layout. Download the latest release of mootools, and save it to
app/webroot/js. Inside the
<head> element add
- <?php echo $html->script('mootools'); ?>
Where ‘mootools’ is the name of the file you saved. Also ensure that you have a single element wrapping
$content_for_layout. Mine looks like
- <div id="content">
- <?php echo $content_for_layout; ?>
A single wrapping div with an id will make updating it later that much easier. The helpers automate replacing a single element, if you have different layout requirements, then your code will be a bit different.
Setting up the paginator helper
Next we need to let the
PaginatorHelper know that we will want to create ajax links using the
- <?php $paginator->options(array(
- 'update' => '#content',
- 'evalScripts' => true
evalScripts option is passed into the
eval() any script tags it finds in the response html. At the bottom of our index.ctp, after all the paging links add:
- <?php echo $js->writeBuffer(); ?>
evalScripts the events are rebound, allowing chained Ajax requests.
If you refresh the page you should now have functioning Ajax pagination. However, we can add a bit more spice with some additional effects. By adding a few more options, we can enable a simple fade in / fade out.Show Plain Text