1

我有一个自定义表格，它具有自定义格式，这使得应用现有表格排序插件变得非常不可能。

大多数插件如何在标准 HTML 表格上完成此操作。

只是一个基本的，简单的项目符号解释就可以了。只是想了解它是如何工作的。

4

4 回答 4

1

您将不得不重新构建表。例如，提取所有tr元素，.sort在行数组上运行 a，传递自定义排序函数来检查您感兴趣的列，然后按排序顺序重新插入行。

您的自定义排序函数只需要提取您要比较的值，如果它们相等则返回 0，如果第一个值更大则返回 1，如果第二个值更大则返回 -1。

myArray.sort(function(a, b) {
    var a = parseInt($(a).find('td:first').text(), 10);
    var b = parseInt($(b).find('td:first').text(), 10);

    if(a == b) return 0;
    return a>b ? 1 : -1;
});

演示

请注意，如果您使用分页数据，您当然只能对已发送到客户端的数据进行排序。在这些情况下，您最好向填充表格的服务器发送 AJAX 请求，以请求排序的数据，并根据该响应重新填充表格，就像它是分页响应一样。

于 2012-06-21T10:31:43.330 回答
1

好吧，我从来没有看过这种插件的来源，但我认为它是这样工作的。

HTML 表格是一种矩阵，您可以像这样表示它：

var table = [
 ['Id', 'Name',    'Phone number',   'Email'],
 [2,    'Boris',   '+33686868686',   'ahah@example.com'],
 [1,    'You',      null,            'foo@bar.baz'],
 [5,    'Anyone',   null,            null]
];

使用这样的矩阵，您可以像这样重新排序：

table.sort(function(a, b) {
   return ((a[0] == b[0]) ? 0 : ((a[0] > b[0]) ? 1 : -1));
});

结果是：

 ['Id', 'Name',    'Phone number',   'Email'],
 [1,    'You',      null,            'foo@bar.baz'],
 [2,    'Boris',   '+33686868686',   'ahah@example.com'],
 [5,    'Anyone',   null,            null]

然后，您通过使用排序数组移动它们来重新排序行。

显然，你会有更复杂的排序算法，但我认为基本上是这样完成的。

于 2012-06-21T10:42:08.593 回答
0

我很好奇您认为无法使用现有插件进行排序的“自定义格式”，例如 jQuery 的“tablesorter”插件非常灵活：http ://tablesorter.com/docs/

我在过去使用'sorttable'插件（没有jQuery）也取得了巨大的成功，它允许您使用完全自定义的排序键，所以这可能非常适合您的设置：http ://www.kryogenix.org/代码/浏览器/排序表/

于 2012-06-21T10:36:10.093 回答
-1

这很容易。您可以在 DOM 中移动元素。很简单，您可以将行中的数据放入数组中，对它们进行排序并重建表。

于 2012-06-21T10:34:48.460 回答