Client-Side VisualForce Pagination with Pajinate

Pagination is an essential, and not so easy to implement user interface device that allows the developer to break long lists of items, or one very long item into sub-pages. I love the challenge that pagination brings (who doesn’t really) when developing efficient and reusable server-side code, but this article isn’t about that. Sometimes I need things done quickly, easily, and preferably with as little compromise as possible, and that’s what client-side pagination is all about.

First a shout out to some of the gurus out there, men I admire and whose server-side pagination techniques can only be described as “bloody marvelous”. If you find the need to paginate, and you want to use Apex to do it, check out these articles,

I’ve used these articles to build server-side Paginators, but recently realised there’s another approach using jQuery plugins, one that offers the following:

Pros

VERY quick to implement.

Will work with PageBlockTables, DataTables, Repeats.

Will work with lists of any type, no matter how complex.

Will work with lists of mixed types.

Has nearly zero latency between paginated-pages.

Seriously, is VERY quick to implement.

Cons

We’re restricted by the number of items that can be output by PageBlockTables, DataTables, Repeats.

If your DOM is large, the page will load a touch more slowly.

The technology I’m using to create this pagination is a jQuery plugin I’ve created and cheesely called Pajinate. I’ve written an article on how to implement the plugin for general HTML development, but this article will demo porting the plugin so that it works with VisualForce pages. Enough yapping, let’s write some code.

I’m going to demonstrate two types of implementations, one for DataTables, and the other for Repeats. For the sake of completeness the class that serves as the page controller:

DataTables

This is the more difficult implementation, but that doesn’t mean it’s difficult. Unfortunately Salesforce uses a strange method (I’d go so far as to say it’s bad) of automatically generating Ids for VisualForce pages, and this makes our life a smidgen more difficult.

If you peruse the code below, you’ll notice the weird way I’m including JavaScript in the middle of the page, and this is my preferred method for robustly referring to VisualForce elements in JavaScript. Secondly, on line 5 you’ll see that I’m appending a ‘:tb’ to the end of the Id we’ve assigned to the table; this is because we have no way of getting to the TBODY element that is the direct parent of the TR elements we want to page through.

And that’s it, done! I don’t like the little hack along the way, but it won’t keep me up at night. Right, what’s next?

Repeats

I love Repeats and they’re my favoured method of building pages using iteration (Maybe I just really don’t like tables, they’re so 2001). Attaching Pajinate to Repeats is very easy, first we build the repeat structure:

Give the demos a whirl. I’m sure once you’ve used them you’ll realise that client-side pagination isn’t a second-class citizen. Note that the plugin is also configureable and the options can found on the release page. I’ll also be updating the plugin with new features and bug-fixes from time to time, so check back every now again for the latest code and documentation. For those who are interested, the full code posting can be found here.

It seems that the code samples in this tutorial are incomplete. I don’t see the JavaScript in the middle of the Visualforce page on the datatable example, and the ids referenced in your jQuery code don’t match up with the components. I’m guessing that the JavaScript that defines “accountTableBodyId” and “pbsId” is missing from the VF page code?

If you download the full listing at the end of the article (click on the last word I think) it is included there. That said I think that you’ve made a good point and it may be more confusing to leave it out so it’s in the main article too now. Good luck.

Hi,
i have a problem with pagination.con am displaying all contact records with pagination standard set controller.
here i put command link on contact records. my requirement is when i click on command link it will show it’s detaiiled page in visual force page.here i added one more pagination con1 clicking on next it will show next record detail page so on.
but am comparing param id con1 got one record only .

Innovator. Architect. Author.

Chief Technology Officer at one of Europe's hottest consultancies which I've grown from 5 → 150 people in just over 2 years. I have broad experience in changing the way that companies (including FTSE 100) do business through the use of cloud technology, social networking and mobile platforms.

I have to my name a number of international awards for software development, architecture and developer-community contributions and often speak at the largest industry events in the UK and US. I am also a prolific blogger and a published author.

Salesforce Handbook

Jeff Douglas and I have recently completed our comprehensive guide to salesforce.com and the Force.com Platform. The book targets both developers and administrators who use the platform, or are looking to get into it. For more information feel free to peruse the listing by clicking on the button below.