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

Posted 2023-03-05

【中文标题】使用 html 和 Javascript 进行客户端排序

【英文标题】：Client side sorting with html and Javascript

【发布时间】：2012-09-01 08:19:30

【问题描述】：

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

【参考方案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 是我过去用过的一个很好的。