Ajax Pagination in CakePHP using JQuery
Today I needed ajax-ified pagination in a cakePHP app, and after looking around a bit, I found an excellent start on this blog: http://lucidchart.blogspot.com/2008/10/jquery-ajax-pagination-for-cakephp-12.html. In this post, I add the ability to show and hide a div to provide user feedback during an Ajax action using Jquery.
Simply put the SetupAJAXPagination() function somewhere, and call $(function(){SetupAJAXPagination(‘CssID’);}); in jquery’s $(document).ready() function, and you immediately have ajax-ified pagination using cakePHP’s pagination features.
The only thing else that you may want is to setup some user feedback through some sort of animated GIF (a spinner), or some text telling the user that this section is reloading data from the database, and to be patient.
To do this, all you need is JQuery’s .ajaxStart and .ajaxStop methods:
just create a div with the image/text that you want to show while the user “waits”, something like:
And then in JQuery’s $(document).ready() function, add:
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
And that is pretty much it. The only thing else that I found today was a nifty little site to generate those animated gifs (spinning/twisting/progress bars) that we all search for. You can choose the colors you want, and can easily sample and download the animated gif that is created for you:
Thanks, this is a great tip.
very nice post
You must add one of the following in your router.php configuration file in order to use the ‘page’ parameter in url and Router will parse your url
* Do not parse any named parameters:
* {{{ Router::connectNamed(false); }}}
*
* Parse only default parameters used for CakePHP’s pagination:
* {{{ Router::connectNamed(false, array(‘default’ => true)); }}}
*
* Parse only the page parameter if its value is a number:
* {{{ Router::connectNamed(array(‘page’ => ‘[\d]+’), array(‘default’ => false, ‘greedy’ => false)); }}}
*
* Parse only the page parameter no mater what.
* {{{ Router::connectNamed(array(‘page’), array(‘default’ => false, ‘greedy’ => false)); }}}
*
* Parse only the page parameter if the current action is ‘index’.
* {{{ Router::connectNamed(array(‘page’ => array(‘action’ => ‘index’)), array(‘default’ => false, ‘greedy’ => false)); }}}
*
* Parse only the page parameter if the current action is ‘index’ and the controller is ‘pages’.
* {{{ Router::connectNamed(array(‘page’ => array(‘action’ => ‘index’, ‘controller’ => ‘pages’)), array(‘default’ => false, ‘greedy’ => false)); }}}
*
Great Post!…
[...] I found your entry interesting thus I’ve added a Trackback to it on my weblog
[...]…