I'm using the TableSorter plugin to allow users to easily sort data. It generally works great. My issue is that the first column contains an auto-incremented value. When users sort a column other than this first column I would like those numbers resorted. The table looks like this:
$y = 0;
foreach ($data as $row) {
$y++;
$table = "<tr><td>$y</td></tr>
<td>$row->name</td>
</tr>";
}
print "<table id='myTable' class='tablesorter' cellpadding='1'>
<th>No</th>
<th>Name</th>
$table
</table>";
Upon sorting, I would like $y
to re-order itself so that the top row always displays 1. How can I do this without sending the request back to the server? Javascript?
On the tablesorter home wiki page (under Widgets > other > "Automatic Row numbering") there are three examples:
Automatic row numbering without pager.
// add custom numbering widget
$.tablesorter.addWidget({
id: "numbering",
format: function(table) {
var c = table.config;
$("tr", table.tBodies[0]).each(function(i) {
$(this).find('td').eq(0).text(i + 1);
});
}
});
Automatic row numbering with values instead of an index.
// add custom numbering widget
var columnText = [ 'a', 'b', 'c', 'd', 'e' ];
$.tablesorter.addWidget({
id: "numbering",
format: function(table) {
$("tr:visible", table.tBodies[0]).each(function(i) {
$(this).find('td').eq(0).text( columnText[i] );
});
}
});