Client side Pagination and Sorting in Visualforce Using JQuery

Recently I came across a requirement where I needed to display multiple tables with pagination and sorting on the same visualforce page. I have always done pagination on server side using standard set controller or off set in the past depending on the need and suitability. In this scenario I had a choice to replicate same code over and over or write a generic server side pagination service to achieve this. However, Due to the volume of the data in this instance, I decided to explore client side pagination as it would not impact the heap size and would be light weight as well.

After reasonable research ‘JQuery Data Tables’ stood out to me as the right solution where I could get many other good features like search data set without having to write large amount of code. First I had to upload JQuery data table as a static resource as shown in the image below:

Then I added the data table stylesheet in the page component (as this was a component in the page):

Then I added some styling for data tables i.e. sorting style:

It’s also important to add the source for the javascript block as below:

Then I defined my Jquery lightweight method for pagination:

After that, All I had to was define style class for my data table as below:

As you can see, I have defined my style class as myTable as defined within my JQuery method. And did all the magic. So, when I rendered my table on my page action i.e. button click I was presented with a nice sortable, paginated table. It also allows to search the data and more importantly it’s very fast as all the processing happens on client side.

For security reasons, I have just showed two test data in the table. But the table can easily handle few thousands record without having much impact on heap size.

This is great for achieving some cool features with very minimal code, however I would recommend server side pagination for large datasets.