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

Question

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

Answer 1

http://tinysort.sjeiti.com/应该是有用的

Answer 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

斯图尔特·兰里奇的脚本-http://yoast.com/articles/sortable-table/

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

Answer 3

tablesorter很好，但您想要的是内置过滤功能的，并且使用和支持非常广泛的东西http://datatables.net/

Answer 4

每个表分类器都是这样工作的：

1. 获取数组中的table.tbody.rows
2. 使用自定义比较函数对数组进行排序
3. 按正确顺序将行追加到表体

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

Answer 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是我过去使用过的一个很好的表。