AJAX pagination with jQuery and elements > Cake Toppings

AJAX pagination with jQuery and elements

Posted by primeminister | Filed under Cake-Toppings, jQuery/javascript

A simple way to get your paginated data in your view through ajax with jQuery. Thanks to Cesay Dreier and his article at the bakery http://bakery.cakephp.org/articles/view/easy-ajax-pagination-using-jquery.

I changed the code a bit because I use elements in an extensive way. So here is almost the same code but now with an element and some updated javascript code.

I used the latest CakePHP 1.2.5 and did nothing to the layout. So the classes or id’s will be of the default CakePHP layout. I added the blog tutorial posts table and some data.

1. Add to your controller (or AppController):

// my posts controller looks like this
class PostsController extends AppController {
	var $name = 'Posts';
	var $components = array('RequestHandler');
	var $paginate = array('limit' => 10);

	function index() {
		$this->Post->recursive = 0;
		$this->set('posts', $this->paginate());
	}
}

2. Add jQuery:

Download jQuery and put it in your webroot/js folder or link it directly to the CDN at Google

(edit views/layout/default.ctp)

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

echo $javascript->link('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');

3. Create the element posts list

Create a file in views/elements/ajaxpagination.ctp

Because I used a freshly baked app I copied the code from views/posts/index.ctp and pasted that into that element view file. The code I copied was starting at the end of the h2 all the way to the beginning of <div class=”actions”>.

4. Add the container div to put the AJAX data in:

So we removed that posts list view code and replaced it by the element:

<?php echo $this->element('ajaxpaginate'); ?>

We surround that element rendering code with our div

<div id="paginatedata"></div>

And it looks now like:

<div id="paginatedata"><?php echo $this->element('ajaxpaginate'); ?></div>

5. Add the javascript to your default layout (or in your view/posts/index.ctp)

I added this just before the ending </head> tag:

<script type="text/javascript">
	$(document).ready(function(){
		$('table th a, .paging a').live('click', function() {
			var url = $(this).attr("href");
			$('#paginatedata').load(url);
			return false;
		});
	});
</script>

This code will bind click events on page load to the pagination links on this page. I used two selectors (‘table th a’ and ‘.paging a’) because of the sorting and paging links.

6. Last step: only render the element when performing AJAX calls:

Add this to yout index() method in your posts controller after the posts data is set.

if ($this->RequestHandler->isAjax()) {
	$this->render('/elements/ajaxpaginate');
	return;
}

My complete posts_controller.php

class PostsController extends AppController {

	var $name = 'Posts';
	var $components = array('RequestHandler');
	var $paginate = array('limit' => 10);

	function index() {
		$this->Post->recursive = 0;
		$this->set('posts', $this->paginate());
		if ($this->RequestHandler->isAjax()) {
			$this->render('/elements/ajaxpaginate');
			return;
		}
	}
}

Now refresh your posts index page in your browser and click on the pagination and sorting links.

If you have any feedback or questions please add a comment.
Cheers!

8 Responses to “AJAX pagination with jQuery and elements”

kvz Says:
December 1st, 2009 at 15:31
Muy excelente! You saved my day again Charlie
primeminister Says:
December 1st, 2009 at 17:30
@kvz: You are most welcome. Show me a link to your app, please!
kvz Says:
December 6th, 2009 at 17:47
I’d like to but I’m afraid it’s an internal app for the company.
However in the near future it will also replace our customer care center so by that time you’ll be able to checkout the same great stuff but only with strict limits to your account.

(that would be, the customer portal for http://true.nl/)

Just wondering. How are you with your schedule. Fully booked I suppose?
CakePHP borrel & Show-your-code meetup – Singel 146 Says:
January 11th, 2010 at 14:56
[...] laat zijn “AJAX pagination met jQuery en elements” [...]
adnan Says:
February 8th, 2010 at 20:46
I think we should use JSON whenever we need to use Ajax to reduce data transfer. Do you know any ready-made way to use ajax pagination in cakephp using JSON ?
primeminister Says:
February 9th, 2010 at 09:45
@adnan: Check out the bakery. (or use google). The article examples can be easily used with JSON but the javascript part, to render all the pagination elements, can be quite some work.
Asgar Says:
July 1st, 2010 at 11:23
Hi,

I done the code in my page, but i’m not getting or seeing any pagination.

Thanks
Asgar
Fredrick Leiendecker Says:
September 1st, 2010 at 09:38
Nice blog. It’s everything here exactly what I need to know.

Cake Toppings