Cool Solutions

jQuery Tablesorter: Pagination and Sorting made simple



By:

August 20, 2009 5:49 pm

Reads: 383

Comments:2

Score:3

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

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
Email
Age
Premium Amount

This is represented in a table as below.

Last Name First Name Email Age Premium Amount
Mendes Domnic domnic@gmail.com 29 5500
Bharne Sagar sbharne@yahoo.com 25 4500
Rambo John sylvester@hotmail.com 60 10000
Fernandes Timothy timothy@fernandes.com 35 6500
Mendes Danny domnic@gmail.com 29 5500
Karpe Sagar sbharne@yahoo.com 25 4500
Stallone Sylvester sylvester@hotmail.com 60 10000
Fernandes Domnic timothy@fernandes.com 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">
$(document).ready(function() 
    { 
        $("#insured_list").tablesorter(); 
    } 
); 
</script>

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">
	<form>
		<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>
			
		</select>
	</form>
</div>

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">
	$(document).ready(function() 
    { 
        $("#insured_list")
		.tablesorter({widthFixed: true, widgets: ['zebra']})
		.tablesorterPager({container: $("#pager")}); 
    } 
	); 
</script>

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:
http://tablesorter.com/docs/

Download Jquery and Plugins here:
http://tablesorter.com/docs/#Download

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

VN:F [1.9.22_1171]
Rating: 3.0/5 (1 vote cast)
jQuery Tablesorter: Pagination and Sorting made simple, 3.0 out of 5 based on 1 rating

Tags:
Categories: Uncategorized

Disclaimer: This content is not supported by Novell. 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.

2 Comments

  1. By:rsapra

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

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  2. By:sandip2608

    Hi,

    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

    cheers

    VN:F [1.9.22_1171]
    Rating: 4.0/5 (1 vote cast)

Comment

RSS