javascript - 应用 jQuery tablesort 并重新编号行项目 #'s

Question

我需要你的帮助。

虽然我喜欢这个 jQuery tablesorter 插件，但它唯一的缺点是我的行号因为在对另一列进行排序时排序不正确。如何重新编号行项目#，以便它们按顺序排列。例如，如果我单击 [First Name] 列，表格将如下图所示排序:

如您所见，我左边的数字现在乱码了。如何按照从(最低到最高整数)开始的正确顺序删除和重新编号行项目#。

这是有问题的标记:

$(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>jsmith@gmail.com</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bach</td>
      <td>Frank</td>
      <td>fbach@yahoo.com</td>
      <td>$50.00</td>
      <td>http://www.frank.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Doe</td>
      <td>Jason</td>
      <td>jdoe@hotmail.com</td>
      <td>$100.00</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Conway</td>
      <td>Tim</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
    </tr>
  </tbody>
</table>

Answer 1

完成排序后它会触发 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>jsmith@gmail.com</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bach</td>
      <td>Frank</td>
      <td>fbach@yahoo.com</td>
      <td>$50.00</td>
      <td>http://www.frank.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Doe</td>
      <td>Jason</td>
      <td>jdoe@hotmail.com</td>
      <td>$100.00</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Conway</td>
      <td>Tim</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
    </tr>
  </tbody>
</table>