NOTE!
- This demo uses the
updateAll
method (v2.8). - This method allows you to update the cache with data from both the
thead
andtbody
of the table. - The
update
method only updates the cache from thetbody
.
Demo
First Name |
Last Name |
Value |
Total |
Discount |
Date |
---|---|---|---|---|---|
Peter | Parker | x28 | $9.99 | 20% | Jul 6, 2006 8:14 AM |
Bruce | Almighty | x45 | $153.19 | 44% | Jan 18, 2001 9:12 AM |
Clark | Kent | y18 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
John | Hood | y33 | $19.99 | 25% | Dec 10, 2002 5:14 AM |
Javascript
$(function() {
// Set up empty table with second and first columns pre-sorted
$("table").tablesorter({ theme : 'blue', sortList: [[2,0]] });
var indx = 0;
$("#update").on('click', function() {
// prevent link from removing all data from the column
if (indx++ < 2) {
// append new html to thead & tbody
$("table thead th:eq(2)").html("Age");
$("table tbody").find('td:nth-child(3)').html(function(i,h){
return h.substring(1); // remove x & y prefix
});
var resort = true, // re-apply the current sort
callback = function(){
// do something after the updateAll method has completed
};
// let the plugin know that we made a update, then the plugin will
// automatically sort the table based on the header settings
$("table").trigger("updateAll", [ resort, callback ]);
}
return false;
});
});
HTML
<table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Value</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr><td>Peter</td><td>Parker</td><td>x28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
<tr><td>John</td><td>Hood</td><td>y33</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>y18</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>x45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
</tbody>
</table>
<a href="#" id="update">Modify the entire value column</a>