HTML table 超过 10 行排序无效

Question

我的 table 有问题，如果 table 中的行数超过 10 行，我的 table 将无法排序 (desc)。如果我有 10 行或更少行但不多，它会完美地工作。这是我的代码：

function sortAndFadingRows(rowId) {
    var $row = $(rowId);
    var oldRowIndex = $row.index();
    sortTable();
    var newRowIndex = $row.index();
    if (newRowIndex < oldRowIndex) {
        $row.children().effect('highlight', { color: '#fff' }, 1000);
    }                             }



var sortTable = function () {
    var table = $("#tableId");

    var sorts = table.find(".item").detach().toArray();
    sorts.sort(function (a, b) {
        var valA = parseInt($(a).find(".myValue").text());
        var valB = parseInt($(b).find(".myValue").text());
        return valA < valB; 
    });

   table.append(sorts);          };

我每次收到数据都会调用sortAndFadingRows(rowId)，收到的时候我直接放在一个td中的特定列中，让table按照这个列排序。然后我发送行 ID 以检查其索引是否已更改。如果该行向上跳（其索引减少），那么我将其突出显示，否则不会。正如我所说，如果我们有 10 行或更少但不超过 10 行，它就完美了。有人知道我做错了什么吗？

Answer 1

您的排序比较器函数应该 return 一个数字，而不是布尔值。 return 语句应该是

    return valA - valB;

比较器 return 值解释为：

负数表示第一项应排在第二项之前
正数意味着第二个项目应该在第一个之前
零表示他们可以按任何顺序进行

JavaScript 中 .sort() 例程的规范明确允许算法 不稳定 。这意味着当您的比较器 returns 0 时，项目 可能会 被重新排序，而不是保留在它们的原始顺序中。

如果需要稳定性，可以在一些secondary key上添加对比；也就是说，如果主键不同，则该行的其他部分并不重要。为此，如果第一次比较结果为零，则必须提取辅助键：

  // ...
  var result = valA - valB;
  if (result !== 0)
    return result;
  // Fetch secondary keys
  valA = parseInt($(a).find(".secondary").text());
  valB = parseInt($(b).find(".secondary").text());
  return valA - valB;

如果没有辅助键可以作为一种有意义的方式来保持顺序，您可以在排序之前对列表进行预处理，然后添加一个键，一个基于按原样订购。

HTML table 超过 10 行排序无效

HTML table with more than 10 rows sorting is not working

html

javascript

arrays

jquery

html-table