tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:

* Multi-column sorting
* Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
* Support for ROWSPAN and COLSPAN on TH elements
* Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
* Extensibility via widget system
* Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
* Small code size

Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
Getting started

To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the 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();
    }
); 

Click on the headers and you’ll see that your table is now sortable! You can also pass in configuration options when you initialize the table. This tells tablesorter to sort on the first and second column in ascending order.

$(document).ready(function()
    {
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
    }
);

NOTE! tablesorter will auto-detect most data types including numbers, dates, ip-adresses

Demo: http://tablesorter.com/docs/

Download: http://tablesorter.com/jquery.tablesorter.zip

Source: http://tablesorter.com/docs/

Related Listings:

1. Standardista Table Sorting Standardista Table Sorting is a JavaScript module that lets you...
2. TableSorter plug-in for jQuery Plugin 1.0 TableSorter plug-in for jQuery tablesorter 2.0 The new tablesorter 2.0...
3. Ingrid Table jQuery Plugin Datagrids don’t have to be difficult to use anymore –...
4. New Sort Table Rows with Ajax Simple sort script using Stuart Langridge’s sortabe.js Some days ago...
5. TinyTable V3: Advanced JavaScript Table Sorter TinyTable, a lightweight JavaScript table sorter that was featured before,...

Do you like this post?

Email: