October 23rd 2008

Client Side Table Sorting, Paging and Filtering with jQuery Demo

I have been incorporating client side table sorting, paging and filtering using jQuery and some great plugins that I first wrote about earlier in the week. In the first post I only mentioned the tablesorter paging plugin and did not demonstrate it. I finally had the chance to start working with the paging plugin and it couldn’t be much easier. One thing I ran into though is that by default if you are paged into the data and then click sort, the pager does not reset to the first page. Some searching didn’t turn up any similar concerns so since I work from home for a one developer company I thought I would ask you if this makes sense or if I should try and reset the pager when the table is sorted. Please be sure to vote in the poll when you view the live demo.

Live Demo | Download (HTML, CSS, JavaScript)

End Product:

End Product Image

To get this working for yourself make sure to include all of the required js and css files for the following plugins:

jQuery to make everything work:

The only thing that I have added since the previous post is the .tablesorterPager({ container: $(“pagerOne”), positionFixed: false}) and the related html for the pager to get things working. The html below is only slightly modified from the examples on the tablesorter website.

HTML Markup for Footer:

Personally I think the pager needs to be reset to the first page when the table is sorted. I didn’t find anyone else on the web complaining about this so I am not totally sure though. Its easy enough to do though by using just a little bit more jQuery that fires the first button whenever a header row is clicked.

 $("#tableOne .header").click(function() {
     $("#tableOne tfoot .first").click();
 });

Please vote in the poll on the demo page as to whether or not I should be resetting the pager. I hope you enjoy the demo and found something useful in the post.