TableSorter jquery插件如何求助自动递增数字

Question

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?

Answer 1

On the tablesorter home wiki page (under Widgets > other > "Automatic Row numbering") there are three examples:

• Automatic row numbering with pager.

• 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] );
          });
      }
  });