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.
| First Name | Last Name | Age | Total | Discount | Difference | Date | English |
|---|---|---|---|---|---|---|---|
| Peter | Parker | 28 | $9.99 | 20.9% | +12.1 | Jul 6, 2006 8:14 AM | 01-Dec-1940 |
| John | Hood | 33 | $19.99 | 25% | +12 | Dec 10, 2002 5:14 AM | 01-Dec-1941 |
| Clark | Kent | 18 | $15.89 | 44% | -26 | Jan 12, 2003 11:14 AM | 01-Jan-1940 |
| James | Bond | 46 | €153.19 | 44.7% | +77 | Jan 18, 2001 9:12 AM | 01-Feb-1940 |
| Bruce | Evans | 22 | $13.19 | 11% | -100.9 | Jan 18, 2007 9:12 AM | 01-Mar-1940 |
| Brian | Evans | 22 | ¥13.19 | 11% | 0 | Jan 18, 2007 9:12 AM | 31-Jul-1940 |
| Paul | Parker | 28 | $9.99 | 20.9% | +12.1 | Jul 6, 2006 8:14 AM | 01-Aug-1940 |
| Jack | Hood | 33 | $19.99 | 25% | +12 | Dec 10, 2002 5:14 AM | 01-Dec-1940 |
| Clark | Kent | 18 | $15.89 | 44% | -26 | Jan 12, 2003 11:14 AM | 28-Apr-1940 |
| James | Bond | 45 | $153.19 | 44.7% | +77 | Jan 18, 2001 9:12 AM | 01-Dec-1940 |
| Bruce | Evans | 22 | $13.19 | 11% | -100.9 | Jan 18, 2007 9:12 AM | 01-Dec-1940 |
| Bruce | Smith | 65 | $13.19 | 11% | 0 | Jan 18, 2007 9:12 AM | 02-Aug-1940 |
| Darren | Webb | 56 | £19.99 | 25% | +12 | Dec 20, 1960 5:14 AM | 20-Sep-1942 |
| Brian | Webb | 84 | £15.89 | 44% | -26 | May 28, 1933 11:14 AM | 20-Sep-1941 |
| Albert | Einstein | 45 | $5.015625 | 64.1% | -20 | Dec 18, 2001 9:12 AM | 01-Dec-1961 |
| Albert | Einstein | 30 | $6.015625 | 64.1% | -25 | Feb 29, 2000 9:15 AM | 01-Dec-1960 |
TIP! Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
$(document).ready( function()
{
$("#myTable").tablesorter();
}
);
Syntax: [column,sortdirection],[column = 0 ... n, direction = ascend 0|descend 1], [2,0], [3,0], [4,1], [5,1]
This tells tablesorter to sort on the first [0, 0|1] and second column [1] in ascending [0] order.
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
/* For DateTime columns you can specify your format, like this:
The available ones (currently) are: us, pt and uk. (for pt you can use 'dd/MM/yyyy hh:mm:ss') */
$(document).ready(function()
{
$("#myTable").tablesorter( {dateFormat: 'pt'} );
}
);
/* Actual */
$( function() {
$("#tablesorter-demo").tablesorter({
sortList: [[0, 0], [2, 1]] /* column 0 ascending 0 and column 2 descending 1 */
});
});
/* Actual */
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.