使用 html 和 Javascript 进行客户端排序答案

【问题标题】：Client side sorting with html and Javascript使用 html 和 Javascript 进行客户端排序
【发布时间】：2012-09-01 08:19:30
【问题描述】：

如何制作一个 html 表格，用户可以使用列标题在客户端进行排序？我可以将所有行的 html 数据加载到 Javascript 数组中，并使用 dom 将表格添加到内容 div，但这是正确的方法吗？如果你列出主要方法，我可以从那里找到我的方法，所以我不是要代码。

【问题讨论】：

标签： javascript jquery html sorting html-table

【解决方案1】：

http://tinysort.sjeiti.com/ 应该很有用

【讨论】：

【解决方案2】：

如果您已经使用 JS 框架，则无需重新发明轮子，但这里有一些不错的解决方案：

表格排序 - http://www.frequency-decoder.com/demo/table-sort-revisited/

JQuery 表格排序器 - http://tablesorter.com/docs/#Demo

GridView3 - http://dev.sencha.com/playpen/ext-2.0/examples/grid/grid3.html

Stuart Langridge 的脚本 - http://yoast.com/articles/sortable-table/

Mootools Mootable - http://joomlicious.com/mootable/

【讨论】：

【解决方案3】：

tablesorter 很好，但你想要一些内置过滤功能的东西，并且得到广泛使用和支持，试试http://datatables.net/

【讨论】：

【解决方案4】：

每个表格排序器都这样工作：

在数组中获取table.tbody.rows
使用custom compare function 对该数组进行排序
以正确的顺序将行附加到表体

如果您预先计算要比较的值（而不是在每次比较时访问 DOM 元素），通常会快一点，然后数组将包含在一个槽中具有值的对象和在一个槽中具有表行元素的对象另一个。

【讨论】：

【解决方案5】：

如果你有一个数组，那么调用sort() 可能是你最好的选择：

function sortArray(a, b){
  //could also say return a-b instead of the blown out if...else construct
  if(a.Age===b.Age) { return 0; }
  else if (a.Age < b.Age) { return -1; }
  else { return 1; }
}

var rows = [{Name: 'Amy', Age: 10}, {Name: 'Bob', Age: 20}];
var sortedArray = rows.sort(sortArray);

正如其他答案所述，您也可以使用插件。 DataTables 是我过去用过的一个很好的。

【讨论】：