Cool Solutions

jQuery Tablesorter: Pagination and Sorting made simple


August 20, 2009 5:49 pm





For those who are not familiar with jQuery here is a brief overview.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Below is an example that shows the power of jquery.


Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

Lets get started.

We have a table with following Data:

Last Name 
First Name
Premium Amount

This is represented in a table as below.

Last Name First Name Email Age Premium Amount
Mendes Domnic 29 5500
Bharne Sagar 25 4500
Rambo John 60 10000
Fernandes Timothy 35 6500
Mendes Danny 29 5500
Karpe Sagar 25 4500
Stallone Sylvester 60 10000
Fernandes Domnic 35 6500

Please note the tablesorter works on HTML tables and the columns of table need to be specified in <thead></thead> tags as shown above.

Include the following js files in the <head></head> tag

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

Now, we need to initiate the table sorting action with the following javascript code:

<script defer="defer">

insured_list is the id of table above

Adding the Pagination Code

Here is the additional html code for the paginator:

<div id="pager" class="pager">
		<img src="images/first.png" class="first"/>
		<img src="images/prev.png" class="prev"/>
		<input type="text" class="pagedisplay"/>
		<img src="images/next.png" class="next"/>
		<img src="images/last.png" class="last"/>
		<select class="pagesize">
			<option value="">>LIMIT</option>
			<option value="2">2 per page</option>
			<option value="5">5 per page</option>
			<option value="10">10 per page</option>

Include the following js files in the <head></head> tag:

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.pager.js"></script> 

Here is the revised code for the pagination and sorter to attach the tablesorter feature:

<script defer="defer">
		.tablesorter({widthFixed: true, widgets: ['zebra']})
		.tablesorterPager({container: $("#pager")}); 

The following code is used for the pagination:

 .tablesorterPager({container: $("#pager")}); 

Screen Shot of above example:

Download this complete example here

For more details on this plugin and various features/options available do visit:

Download Jquery and Plugins here:

Note: Sort multiple columns simultaneously by holding down the shift key.

1 vote, average: 4.00 out of 51 vote, average: 4.00 out of 51 vote, average: 4.00 out of 51 vote, average: 4.00 out of 51 vote, average: 4.00 out of 5 (1 votes, average: 4.00 out of 5)
You need to be a registered member to rate this post.

Categories: Uncategorized


Disclaimer: This content is not supported by Micro Focus. It was contributed by a community member and is published "as is." It seems to have worked for at least one person, and might work for you. But please be sure to test it thoroughly before using it in a production environment.


  1. By:rsapra

    how do we implement if we want this data to be populated from IDV and perform operations. Any ideas

  2. By:sandip2608


    I have used this sorting and paging plugin in my ASP.NET MVC project for search screens. I am loading search result using ajax call (JsonResult) and applying sorting and paging.

    The problem is, first time when the table is loaded using ajax, the sorting and paging works fine. But on second request onwards (without refreshing the web page) paging is not working anymore. Sorting is working fine.

    After debuggin the tablesorter.pager.js, I found that in the “renderTable” method “$(table.tBodies[0])” is undefined.

    Its working fine with firefox. But the only problem is in IE9.

    Can you please provide some solution how can I make paging working on second requests (without refreshing the page) in IE9.

    Thanks in Advance