CF Mitrah Blog

To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the head tag of your HTML document:

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

tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:

<table id="myTable"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 

Start by telling tablesorter to sort your table when the document is loaded:

$(document).ready(function() { 
$("#myTable").tablesorter();  
}); 

tablesorter will auto-detect most data types including numbers, dates, ip-adresses
for more information seeDEMO 

Related Entries:

• JQuery Tutorial - Part 1
• JQuery Tutorial - Part 2
• Most Useful jQuery plugins

JQuery Tutorial Sort table