应用 jQuery 表格排序并重新编号行项目 #'s

Question

我需要你的帮助。

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

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

这是有问题的标记：

$(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>.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>.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>0.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>.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>.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>.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>0.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>.00</td>
      <td>http://www.timconway.com</td>
    </tr>
  </tbody>
</table>

Answer 2

使用 sortEnd 事件并添加一些代码对第一列重新编号：

$(document).ready(function() 
    { 
        $("#myTable").tablesorter().bind("sortEnd",function(e, t){
            var table = $(this);
            table.find('tbody tr').each(function(i){
                var row = $(this);
                var firstCell = row.find('td:first-child');
                firstCell.text(i+1);
            });
        });
    } 
);

工作fiddle：http://jsfiddle.net/gdxjvtkm/

应用 jQuery 表格排序并重新编号行项目 #'s

Applying the jQuery tablesort and re-numbering line item #'s

javascript

sorting

jquery

tablesorter