主页 / 问题 / 662927
Accepted
Sonfire
Asked:2020-05-07 14:37:10 +0000 UTC2020-05-07 14:37:10 +0000 UTC

Tablesorter jquery js排序

  • 772

问题是当添加或用新内容替换旧内容时，旧内容仍然排序。这怎么能解决？

function adTable() {
var tbody = $('#mytable tbody');
    for (i = 0, j = 1; i < tab_friends.length; i++, j++) {//Заполнение таблицы
        tbody.append('<tr><td>' + nodes[j].first_name + '</td><td>' + nodes[j].last_name + '</td><td>' + tab_friends[i].friends.length + '</td></tr>');
    }
        jQuery(document).ready(function($) {//Сортировка
        $("#mytable").tablesorter({});
    });
}
javascript

1 个回答

  1. Best Answer

    如果我正确理解了问题，那么您的排序将因重新调用.tablesorter. 如果已经为表调用了tablesorter，那么在更新数据的时候，调用update. 下面是一个变量isUpdate负责初始化或更新 tablesorter 的示例。添加该功能genNewData以生成演示数据，在您的情况下不需要它。

    $(document).ready(function() {
  var tab_friends = [];
  var nodes = [];
  var isUpdate = false;

  function adTable() {
    var table = $("#mytable");
    var tbody = table.find('tbody');

    for (i = 0, j = 1; i < tab_friends.length; i++, j++) {
      tbody.append('<tr><td>' + nodes[j].first_name + '</td><td>' + nodes[j].last_name + '</td><td>' + tab_friends[i].friends.length + '</td></tr>');
    }
    if (isUpdate) {
      table.trigger('update');
    } else {
      table.tablesorter({});
    }
    isUpdate = true;
  }


  $('button').click(genNewData);

  function genNewData() {
    var str = 'qwertyuiopasdfghjklzxcvbnm';
    nodes = [];
    for (var i = 0; i < 4; i++) {
      nodes.push({
        first_name: str.split('').sort(function(a,b) { Math.random() * 2 - 1}).join('').substr(0, 6),
        last_name: str.split('').sort(function(a,b) { Math.random() * 2 - 1}).join('').substr(0, 8)
      });
    }
    tab_friends = [];
    for (var j = 0; j < 3; j++) {
      tab_friends.push({
        friends: {
          length: Math.floor(100 * Math.random())
        }
      })
    }
    adTable();
  }
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.9/js/jquery.tablesorter.min.js"></script>
<table id="mytable" rules="all" border="1">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Friends</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<button>Add new data</button>

    如果您按任何列排序，那么即使在添加数据后排序也会保留。

    • 1

相关问题