Article

mendesdomnic's picture
article
Reads:

72553

Score:
3
3
4
 
Comments:

2

jQuery Tablesorter: Pagination and Sorting made simple

Author Info

20 August 2009 - 4:49pm
Submitted by: mendesdomnic

Author Blog
Author Profile

Tags

Tags Map

(View Disclaimer)

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:

Click to view.

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.

AttachmentSize
tablesorter example.zip34.79 KB

Disclaimer: As with everything else at Cool Solutions, this content is definitely not supported by Novell (so don't even think of calling Support if you try something and it blows up).

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, test, test before you do anything drastic with it.



Related Articles


User Comments

rsapra's picture

how do we implement if we

Submitted by rsapra on 11 November 2010 - 10:19pm.

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

sandip2608's picture

issue with Paging in IE9 on second request onwards...

Submitted by sandip2608 on 9 August 2011 - 6:38pm.

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

© 2013 Novell