CakePHP ajaxed pagination and sort

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!

16 thoughts on “CakePHP ajaxed pagination and sort

  1. Jeet

    That looks great, basically I will use my normal pagination and livequery plug-in will paginate it with AJAX queries if user has javascript enabled. Will have to find out about jQuery.live as well πŸ˜‰

  2. Amy Rich

    πŸ™‚ jQuery.live seems like a very good option, Your informations and tips reagarding this has helped me a lot, adding a component of request handlers seems to doing fairly well in organizing things,previously i was using livequery plugin which paginate it with AJAX queries. Thanx for forwarding the idea!! πŸ™‚

  3. Mark Slater

    Hey Nik, That was really helpfull info, But Haven’t you tried Rails ?

    As for the 2.0 version of Rails, the pagination features have been moved from Rails core into a plugin called classic pagination. Unfortunately many people prefer to use another plugin called will_paginate, but I didn’t manage to work with this plugin. So we have to install the classic pagination plugin with the following command :

    /*$ ruby script/plugin install svn://errtheblog.com/svn/plugins/classic_pagination*/

    Also, Grid with HTML is nice feature, if you add em up

  4. martin

    I’m trying to use jquery live for what you have described – but I’m having some problems.
    As a test I’ve added the following to make jquery ignore all in the page:
    $(“a”).live(“click”, function() { return false; })
    I works fine for this:
    google
    but for this it doesn’t work:
    2
    As the skilled cakephp’ian can tell this originates from :
    echo $paginator->numbers(array(‘separator’=>’ – ‘));
    I have narrowed the problem down to the colon between ‘page’ and ‘2’

    How can I avoid this ? I have tried with what is suggested here -> ‘a[href*=/page:]’ – doesn’t help though

  5. martin

    sorry some of the code was intepreted – I’ll try again:

    I’m trying to use jquery live for what you have described – but I’m having some problems.
    As a test I’ve added the following to make jquery ignore all in the page:
    // $(“a”).live(“click”, function() { return false; }) //
    I works fine for this:
    //
    google //
    but for this it doesn’t work:
    // 2 //
    As the skilled cakephp’ian can tell this originates from :
    // echo $paginator->numbers(array(‘separator’=>’ – ‘)); //
    I have narrowed the problem down to the colon between ‘page’ and ‘2’

    How can I avoid this ? I have tried with what is suggested here -> ‘a[href*=/page:]’ – doesn’t help though

  6. Nik Chankov Post author

    Martin,

    I’ve got your question. The suggested code (in the post) is working properly in my recent project without any problems. Why do you need to make such things like

    <a href="2" rel="nofollow">2</a>

    The idea of this snippet is to transfer a.click event to a.ajax event and it’s restricted only to links containing page and sort parameters. Your code $(“a”) will stop clicks to all links in the site/application.

    If you want I can provide an example, but basically there aren’t any changes in the php part of the code.

    I am using live too in my project, as suggested from Mark.

    Could you clarify why you want to modify pagination links?

  7. Pingback: CakePHP - PHP Framework, ????? ? ????? ?? ???

  8. Pingback: CakePHP, pagination, jQuery i zak?adki (tabs) « webbricks

  9. Sanjeev Divekar

    For me
    $(‘a[href*=”sort:”],a[href*=”page:”]’).livequery(‘click’, function(){
    $(‘#content’).load($(this).attr(‘href’));
    return false;
    });
    working with JQuery 1.7

Leave a Reply

Your email address will not be published. Required fields are marked *