javascript - 应用jQuery tablesorter并对订单项重新编号

我需要你的帮助。

虽然我喜欢这个jQuery tablesorter插件，但是它唯一的缺点是我的行号，因为排序另一列时排序不正确。如何对订单项＃进行重新编号，使其顺序排列。例如，如果我单击[名字]列，则该表在下图中的排序如下：



正如您可以清楚地看到的那样，我左边的数字现在不合时宜。如何以正确的顺序删除（从最低到最高的整数）订单项＃并对其重新编号。

这是有问题的标记：

$(document).ready(function() {
  $("#myTable").tablesorter();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://my-script-hosting.googlecode.com/files/jquery.tablesorter.min.js"></script>

<script type="text/javascript">
</script>

<table id="myTable" class="style1" border="1" cellspacing="1">
  <thead>
    <tr style="border-width: 1px; background-color: #C0C0C0">
      <th>#</th>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Email</th>
      <th>Due</th>
      <th>Web Site</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Smith</td>
      <td>John</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bach</td>
      <td>Frank</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.frank.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Doe</td>
      <td>Jason</td>
      <td>[email protected]</td>
      <td>$100.00</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Conway</td>
      <td>Tim</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
    </tr>
  </tbody>
</table>

最佳答案

完成排序后，它将触发sortEnd事件，此时更新编号

$(document).ready(function() {
  $("#myTable").tablesorter().on("sortEnd", function() {
    $(this).find("tr:gt(0)").each(function(i) {
      $(this).find("td:eq(0)").text(i+1);
    });
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://my-script-hosting.googlecode.com/files/jquery.tablesorter.min.js"></script>

<script type="text/javascript">
</script>

<table id="myTable" class="style1" border="1" cellspacing="1">
  <thead>
    <tr style="border-width: 1px; background-color: #C0C0C0">
      <th>#</th>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Email</th>
      <th>Due</th>
      <th>Web Site</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Smith</td>
      <td>John</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bach</td>
      <td>Frank</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.frank.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Doe</td>
      <td>Jason</td>
      <td>[email protected]</td>
      <td>$100.00</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Conway</td>
      <td>Tim</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
    </tr>
  </tbody>
</table>