Here I will describe how I did an Ajaxed pagination for one of my projects using jQuery and Livequery Plugin. Currently I am working on a huge project which, hopefully, will feed me with some ideas for blog posts and this is one of them :). So:

1. Loading the javascript libs

Loading the jQuery and Livequery was done by Autoloader helper, but if you don’t use it just include jQuery and Livequery in your layout with following code

<?php

echo $javascript -> link ( 'jquery.min' ) ;

echo $javascript -> link ( 'plugins/jquery.livequery' ) ;

?>

2. Javascript which handles ajax requests

I would suggest to create separate file about this, but you could insert that code in your layout file. Depends from your coding style. So, the snippet:

$ ( 'a[href*=/sort:],a[href*=/page:]' ) . livequery ( 'click' , function ( ) {

$ ( '#content' ) . load ( $ ( this ) . attr ( 'href' ) ) ;

return false ;

} ) ;

Other important things

Add component RequestHandler, which will detect what is the request type to the controller and automatically change the layout to Ajax. Otherwise you need to change this manually.

Change #content with id of the element which holds the CakePHP content in your design. This is the default #id, so if you are using default layout, don’t touch it. 🙂

What does this script?

The script replaces the standard click event to all links which are used for pagination and sort. Livequery plugin re-bind this after the ajax request.

The good thing is that even if the JavaScript is disabled in the users browser, the sort and pagination functionality will be operational.

The idea for this approach was taken from LucidChart blog. So thanks for the idea!