NOTE!

Demo

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

Javascript

$(function() {

$("table").tablesorter({ theme: 'blue', sortList: [[3,1],[0,0]] });

$("table tbody td.discount").click(function() {

// randomize a number
var resort = "", // resort variable set to anything BUT false (without quotes) will trigger the automatic resort
discount = '$' + Math.round(Math.random() * Math.random() * 100) + '.' + ('0' + Math.round(Math.random() * Math.random() * 100)).slice(-2),
callback = function(table){ /* do something */ };
$(this).text(discount);

// set resort flag to false to prevent automatic resort
// leave the resort flag as undefined, or with any other value, to automatically resort the table
$("table").trigger("updateCell",[this, resort, callback]);

return false;
});

});

HTML

<table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td class="discount">$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td class="discount">$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 class="discount">$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 class="discount">$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 class="discount">$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
</tbody>
</table>

Next up: Modify how the header is rendered to allow for custom styling ››