jQuery Tablesorter 的日期排序问题

Question

我正在尝试对具有类似 2009-12-17 23:59:59.0 的列的表进行排序。 我正在使用下面的方法应用排序，

$(document).ready(function() { 
    $("#dataTable").tablesorter();  
});

但它不适用于 yyyy-mm-dd 格式的日期。 任何人都可以建议我如何应用这种格式进行排序？

Answer 1

正确的做法是为这种自定义格式添加您自己的解析器。

检查这个以了解它是如何工作的。

jQuery Tablesorter：添加您自己的解析器

然后查看表排序器源代码（搜索 uslongdate、shortdate，然后观察 tablesorter 内部如何完成日期格式的解析器。现在为您自己构建一个适合您的特定日期格式的类似解析器。

jquery.tablesorter.js

这应该符合您的喜好

ts.addParser({
    id: "customDate",
    is: function(s) {
        //return false;
        //use the above line if you don't want table sorter to auto detected this parser
        //else use the below line.
        //attention: doesn't check for invalid stuff
        //2009-77-77 77:77:77.0 would also be matched
        //if that doesn't suit you alter the regex to be more restrictive
        return /\d{1,4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}\.\d+/.test(s);
    },
    format: function(s) {
        s = s.replace(/\-/g," ");
        s = s.replace(/:/g," ");
        s = s.replace(/\./g," ");
        s = s.split(" ");
        return $.tablesorter.formatFloat(new Date(s[0], s[1]-1, s[2], s[3], s[4], s[5]).getTime()+parseInt(s[6]));
    },
    type: "numeric"
});

现在只需将其应用到您具有此格式的列（例如，假设您的自定义日期列驻留在第 7 列中。（6 表示第 7 列，因为列的数组是从零开始的）

$(function() {
    $("table").tablesorter({
        headers: {
            6: { sorter:'customDate' }
        }
    });
});

Answer 2

对英国/欧洲日期格式 dd/mm/yyyy 进行排序：

$("#tableName").tablesorter({dateFormat: "uk"});

Answer 3

使用最新版本 2.18.4，您可以简单地这样做。只需提供默认日期格式，并在特定列中设置列日期格式，这仅适用于“shortDate”排序器。

$('YourTable').tablesorter(
            {
                dateFormat:'mmddYYYY',
                headers: {
                    0: { sorter: false },
                    1: { sorter: true},
                    2: { sorter: true },
                    3: { sorter: true },
                    4: { sorter: "shortDate", dateFormat: "ddmmyyyy" },
                    5: { sorter: true },
                    6: { sorter: false },
                    7: { sorter: false },
                    8: { sorter: false },
                    9: { sorter: false },
                    10: { sorter: false },
                    11: { sorter: false }

                }
            });

Answer 4

如果您使用日期/时间格式，例如 mm/dd/yyyy hh:mm，则使用下面的

$.tablesorter.addParser({ 
        id: "customDate",
        is: function(s) {
            //return false;
            //use the above line if you don't want table sorter to auto detected this parser                        
            //21/04/2010 03:54 is the used date/time format 
            return /\d{1,2}\/\d{1,2}\/\d{1,4} \d{1,2}:\d{1,2}/.test(s);
        },
        format: function(s) {
            s = s.replace(/\-/g," ");
            s = s.replace(/:/g," ");
            s = s.replace(/\./g," ");
            s = s.replace(/\//g," ");
            s = s.split(" ");                       
            return $.tablesorter.formatFloat(new Date(s[2], s[1]-1, s[0], s[3], s[4]).getTime());                                         
        },
        type: "numeric"} );

Answer 5

无需创建新的解析器只需稍作修改即可使用现有解析器。

1. 打开 Jquery 插件 js，您将在其中看到以下脚本。现在只需更改最后一个 else 的日期格式（所需），如果您的情况是“yy-mm-dd”。

    ts.addParser({
    id: "shortDate",
    is: function (s) {
        return /\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4}/.test(s);
    }, format: function (s, table) {
        var c = table.config;
        s = s.replace(/\-/g, "/");
        if (c.dateFormat == "us") {
            // reformat the string in ISO format
            s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$1/$2");
        } else if (c.dateFormat == "uk") {
            // reformat the string in ISO format
            s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");
        } else if (c.dateFormat == "yy-mm-dd" || c.dateFormat == "dd-mm-yy") {
            s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2})/, "$1/$2/$3");
        }
        return $.tablesorter.formatFloat(new Date(s).getTime());
    }, type: "numeric"
});

2. 现在按照抖动提到的最后一步进行操作，但稍加修改。

$(function() {
$("table").tablesorter({
    headers: {
        6: { sorter:'shortDate' }
    }
});
});

Answer 6

dateFormat : "mmddyyyy", // 设置默认日期格式

example-选项日期格式

Answer 7

使用 TableSorter 2，您只需使用 data-text 属性 存储替代排序值。我在 PHP 中这样做是为了在排序时考虑时间，但只在表中显示日期：

<td data-text="<?php xecho(date_format($date, "Y-m-d H:i:s")); ?>">
    <?php xecho(date_format($date, "F d, Y")); ?>
</td>

不需要格式化或解析。

Answer 8

只需添加另一个选择就可以完美地对日期格式进行排序（dd/MM/yyyy hh:mm:ss）。
通过使用 js dataTables 插件。

将以下代码添加到您的代码中：

$(document).ready(function () {
oTable = $('#AjaxGrid').dataTable({
"aLengthMenu": [[5, 10, 25, 50, 100, 500,1000,-1], [5, 10, 25, 50, 100,500,1000,"All"]],
iDisplayLength: 1000,
aaSorting: [[2, 'asc']],
bSortable: true,
aoColumnDefs: [
{ "aTargets": [ 1 ], "bSortable": true },
{ "aTargets": [ 2 ], "bSortable": true },
{ "aTargets": [ 3 ], "bSortable": true },
{ "aTargets": [ 4 ], "bSortable": true },
{"aTargets": [ 5 ], "bSortable": true, "sType": "date-euro"},
{"aTargets": [ 6 ], "bSortable": true, "sType": "date-euro"},
{ "aTargets": [ 7 ], "bSortable": false }
],
"sDom": '<"H"Cfr>t<"F"ip>',
"oLanguage": {
"sZeroRecords": "- No Articles To Display -",
"sLengthMenu": "Display _MENU_ records per page",
"sInfo": " ", //"Displaying _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": " ", //"Showing 0 to 0 of 0 records",
"sInfoFiltered": "(filtered from _MAX_ total records)"
},
"bJQueryUI": true
});
});


//New code
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-euro-pre": function ( a ) {
if ($.trim(a) != '') {
var frDatea = $.trim(a).split(' ');
var frTimea = frDatea[1].split(':');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
} else {
var x = 10000000000000; // = l'an 1000 ...
}

return x;
},

"date-euro-asc": function ( a, b ) {
return a - b;
},

"date-euro-desc": function ( a, b ) {
return b - a;
}
} );