Question

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

Answer 1

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

Answer 2

如果您已经使用了JS Framework，则无需重新发明轮子，但这里有一些很好的解决方案：

TableSort - http://www.frequency-decoder.com/demo/table-sort-revisited/

JQuery tablesorter - 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/

Answer 3

tablesorter很好，但你想要内置过滤的东西，并且使用得非常广泛且受到支持try http://datatables.net/

Answer 4

每个tableorter都是这样的：

获取数组中的table.tbody.rows
使用custom compare function
以正确的顺序将行附加到表正文

如果预先计算要比较的值（而不是在每次比较时访问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是我过去常用的好词。

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

5 个答案: