NOTE!
- The default
sortInitialOrderfor the entire table is set todesc(descending sort). - The last three columns have the initial sort order set in the ascending direction, using the headers option.
- Test the
sortResetoption by clicking on any column at least three times. It should sort in thesortInitialOrderdirection on the first click, the opposite direction on the second click, then reset to the original sort order on the third click. This cycle repeats on subsequent sorts. - Test the
sortRestartoption by clicking on any unsorted column to see that it will always restart from thesortInitialOrder.
Demo
First Name (desc) |
Last Name (desc) |
Age (desc) |
Total (asc) |
Discount (asc) |
Date (asc) |
|---|---|---|---|---|---|
| Peter | Parker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM |
| Robin | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM |
| Clark | Kent | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
| Bruce | Almighty | 45 | $153.19 | 44% | Jan 18, 2001 9:12 AM |
| Bruce | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM |
Javascript
$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
// third click on the header will reset column to default - unsorted
sortReset : true,
// Resets the sort direction so that clicking on an unsorted column will sort in the sortInitialOrder direction.
sortRestart : true,
sortInitialOrder: 'desc',
headers : {
// 0 : { lockedOrder: 'asc' }, only allow sorting in one direction
3 : { sortInitialOrder: 'asc' },
4 : { sortInitialOrder: 'asc' },
5 : { sortInitialOrder: 'asc' }
}
});
});
HTML
<table class="tablesorter">
<thead>
<tr>
<th>First Name (desc)</th>
<th>Last Name (desc)</th>
<th>Age (desc)</th>
<th>Total (asc)</th>
<th>Discount (asc)</th>
<th>Date (asc)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>Robin</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
</tbody>
</table>