3

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

4

5 回答 5

3

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

于 2012-09-07T12:42:08.567 回答
3

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

TableSort - 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/

于 2012-09-07T12:43:56.403 回答
2

每个 tablesorter 都是这样工作的：

  1. 得到table.tbody.rows一个数组
  2. 使用自定义比较函数对该数组进行排序
  3. 以正确的顺序将行附加到表体

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

于 2012-09-07T12:46:02.740 回答
2

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

于 2012-09-07T12:40:50.573 回答
0

如果你有一个数组，那么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是我过去使用过的一个很好的工具。

于 2012-09-07T12:41:38.673 回答