Question

我需要你的帮助。

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

你可以清楚地看到，我左边的数字现在已经不合适了。如何从（从最低到最高整数）开始以正确的顺序删除和重新编号行项目＃。

以下是有问题的标记：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

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

工作小提琴：http://jsfiddle.net/gdxjvtkm/

应用jQuery tablesort并重新编号行项目＃＆＃39; s

2 个答案: