超过 10 行排序的 HTML 表格不起作用

Question

如果我的表中有超过 10 行，我的表将无法排序 (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中，以根据该列对表格进行排序。然后我发送行 id 以检查其索引是否已更改。如果该行向上跳跃（其索引减少），那么我会突出显示它，否则不会。正如我所说，如果我们有 10 行或更少但不超过 10 行，它会完美运行。有人知道我做错了什么吗？

Answer 1

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

    return valA - valB;

比较器返回值解释为：

• 负数表示第一项应排在第二项之前
• 正数表示第二项应排在第一项之前
• 零表示它们可以按任意顺序进行

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

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

  // ...
  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;

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