使用jQuery实现表格排序异常：两位数数字排序失效

嘿，你的问题出在字符串排序 vs 数字排序上！你现在用的localeCompare()是按照字符串的字符顺序来比较的，而不是数字大小——这就是为什么个位数正常，两位数就乱套的原因。举个例子，字符串"10"会被认为比"2"小，因为第一个字符"1"的Unicode码点比"2"低，排序时"10"会排在"2"前面，完全不符合数字大小的逻辑。

修复方案：把文本转换成数字再比较 #

只需要把表格单元格里的文本内容转换成数字类型，再进行差值比较就行。这里我们用parseInt()（如果是小数就用parseFloat()），同时加上trim()避免单元格里的空格干扰转换：

修改后的完整代码如下：

$(function () { 
  $("#btnSort").bind("click", function () { 
    sortTable($("#mytable"), 'des'); 
  }); 
}); 

function sortTable(table, order) { 
  var asc = order === 'asc', 
      tbody = table.find('tbody'); 

  tbody.find('tr').sort(function (a, b) { 
    // 提取单元格文本并转换成数字，trim()处理可能的空格
    var valA = parseInt($('td:eq(0)', a).text().trim(), 10);
    var valB = parseInt($('td:eq(0)', b).text().trim(), 10);
    
    // 根据排序方向返回差值：升序则valA - valB，降序则valB - valA
    return asc ? valA - valB : valB - valA; 
  }).appendTo(tbody); 
}

关键说明： #

• trim()：确保单元格里的空格不会影响数字转换（比如单元格内容是" 10 "，转成数字前先去掉空格）
• parseInt(..., 10)：第二个参数10指定按十进制转换，避免出现八进制解析的意外情况
• 如果你的表格里有小数，把parseInt()换成parseFloat()就可以啦

这样修改后，不管是个位数还是两位数（甚至更大的数字），都会按照实际数字大小正确排序了！

内容的提问来源于stack exchange，提问作者Shaiwal Tripathi