在未显示可排序值的列上对 HTML 表进行排序。任何现有的解决方案？

Question

我知道那里有很多表格分类器。例如，tablesorter、datatables 等。但我没有找到任何可以根据内部关联值对列进行排序的东西。易于解释的示例：日期和时间被检索为简单的 UNIX 整数时间，但使用可能不提供升序或降序日期的格式化字符串格式化显示，如果按 ASCII 显示字符串排序。例如。在 2011 年 12 月 31 日这样显示的日期上进行排序将不会提供时间排序。我知道排序排序器中有专门按日期排序的选项，但我正在为超出标准类型（如日期）的数据类型寻找通用解决方案。

欢迎提出任何建议。我想在 JQuery 中编码。我更多的是寻找一种算法方法，而不是如何编码。例如，在哪里维护隐藏值？例如，列的“td”中的 Data-xxx 属性，并且在该列的“th”中将相同的属性设置为布尔 Y 或 N，以指示显示的排序类型或数据值？

如果存在现有解决方案，请提及。我没有找到任何东西，但我可能又错过了一个。

Answer 1

我使用 Jquery 数据表 (http://datatables.net/)。您可以扩展插件以添加新的“数据格式”。

例子：

我来自西班牙，日期用以下格式表示：dd/mm/yyyy hh:mm:ss。

如果我使用插件用来排序日期的排序器，日期就像字符串一样排序（插件假设数据格式为 yyyy-mm-dd hh:mm:ss）。

您必须执行一个函数来返回一个整数，该整数是日期的“权重”，“20/10/2013”​​的权重小于“15/11/2013”​​，因此 20/10/2013 小于2013 年 15 月 11 日。

对于dd/mm/yyyy的格式，计算权重的函数是：（可以改成mm/dd/yyyy改变frDateParts的索引）

function dateHeight(dateStr){
        if (trim(dateStr) != '') {
                var frDate = trim(dateStr).split(' ');
                var frTime = frDate[1].split(':');
                var frDateParts = frDate[0].split('/');
                var day = frDateParts[0] * 60 * 24; /*<--- in mm/dd/yyyy is frDateParts[1]*/
                var month = frDateParts[1] * 60 * 24 * 31; /*<--- in mm/dd/yyyy is frDateParts[0]*/
                var year = frDateParts[2] * 60 * 24 * 366;
                var hour = frTime[0] * 60;
                var minutes = frTime[1];
                var x = day+month+year+hour+minutes;
        } else {
                var x = 99999999999999999; 
        }
        return x;
}

以及插件的扩展名：

/* NOTE: the new format is called "date-euro" (why not? xD) so:
you have to do the "date-euro-asc" for ascendent order and the "date-euro-desc"
 for descendent order. the return of the function has to be 
-1 (lesser), 0 (equal) or 1 (greater)*/

jQuery.fn.dataTableExt.oSort['date-euro-asc'] = function(a, b) {
        var x = dateHeight(a);
        var y = dateHeight(b);
        var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
        return z;
};

jQuery.fn.dataTableExt.oSort['date-euro-desc'] = function(a, b) {
        var x = dateHeight(a);
        var y = dateHeight(b);
        var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
        return z;
};

当您使用 datetables 插件定义该列的表时：

 { "sType": "date-euro"},

示例（包含 5 列的表（Int、string、Date、string、string）：

  "aoColumns": [
         { "sType": 'numeric' },
           null,
           { "sType": "date-euro"},
           null,
           null 
     ],

Answer 2

是的，解决方案是存在的。您必须在 html 中使用简单的 jquery table-sorter。它在开发时也很有用。 您可以轻松地对所有字段或一个字段进行排序。

jQuery Table Sorter