Thorsday

Thorsday Research Project

Webcommgard: Subduing Loki's Web Mischief


Table Sorter

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

First Name Last Name Age Total Discount Difference Date
Peter Parker 28 $9.99 20.9% +12.1 Jul 6, 2006 8:14 AM
John Hood 33 $19.99 25% +12 Dec 10, 2002 5:14 AM
Clark Kent 18 $15.89 44% -26 Jan 12, 2003 11:14 AM
Bruce Almighty 45 $153.19 44.7% +77 Jan 18, 2001 9:12 AM
Bruce Evans 22 $13.19 11% -100.9 Jan 18, 2007 9:12 AM

Files Needed

jquery.truncate-2.3.js, sortercolor.css, jquery.tablesorter.js

Inline Code

In the head:

<script type="text/javascript">
	$(function() {		
		$("#tablesorter-demo").tablesorter({sortList:[[0,0],[2,1]]});
		$("#options").tablesorter({sortList: [[0,0]], headers: 
		{ 3:{sorter: false}, 4:{sorter: false}}});
	});	
</script>

In the body:

Make a table

<table id="tablesorter-demo" class="tablesorter">
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Age</th>
			<th>Total</th>
			<th>Discount</th>
			<th>Difference</th>
			<th>Date</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Peter</td>
			<td>Parker</td>
			<td>28</td>
			<td>$9.99</td>
			<td>20.9%</td>
			<td>+12.1</td>
			<td>Jul 6, 2006 8:14 AM</td>
		</tr>
		<tr>
			<td>John</td>
			<td>Hood</td>
			<td>33</td>
			<td>$19.99</td>
			<td>25%</td>
			<td>+12</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>-26</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.7%</td>
			<td>+77</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>-100.9</td>
			<td>Jan 18, 2007 9:12 AM</td>
		</tr>
	</tbody>
</table>

Special Considerations

Implementation

Source