如何使用 DataTables jquery 插件按日期排序？答案

【问题标题】：How to sort by Date with DataTables jquery plugin?如何使用 DataTables jquery 插件按日期排序？
【发布时间】：2011-02-21 04:24:10
【问题描述】：

我正在使用数据表 jquery 插件并希望按日期排序。

我知道他们有一个插件，但我找不到从哪里实际下载它

http://datatables.net/plug-ins/sorting

我相信我需要这个文件：dataTables.numericComma.js，但我在任何地方都找不到它，当我下载数据表时，它似乎不在 zip 文件中。

我也不确定是否需要制作自己的自定义日期排序器才能传递给这个插件。

我正在尝试对这种格式 MM/DD/YYYY HH:MM TT(AM |PM) 进行排序

谢谢

编辑

如何将其更改为按 MM/DD/YYYY HH:MM TT(AM |PM) 排序并将其更改为美国日期？

jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

【问题讨论】：

只是想感谢您提供此代码。实际上，我在排序英国日期时遇到了麻烦，而且我发现许多线程的代码都不起作用，确实如此，所以再次感谢您！
我知道这是一个很老的问题，答案也很老。在撰写此评论时，@RenRen 提供的solution 效果很好，似乎是最干净的方法。

标签： jquery jquery-plugins datatables

【解决方案1】：

日期排序 - 带有隐藏元素

将日期转换为 YYYYMMDD 格式并添加到 <td> 中的实际值 (MM/DD/YYYY)，将其包装在一个元素中，设置样式 display:none; 到元素。现在日期排序将像正常排序一样工作。这同样适用于日期时间排序。

HTML

<table id="data-table">
   <tr>
     <td><span>YYYYMMDD</span>MM/DD/YYYY</td>
   </tr>
</table>

CSS

#data-table span {
    display:none; 
}

【讨论】：

如果导出到 Excel，这些隐藏的元素仍然会出现，仅供参考。
@Anulal 在 YYYY 附近有一个额外的关闭标签。请修正答案中的代码。
任何避免在打印、Excel、PDF 等中生成 YYYYMMDD 的解决方法？
@amit 请尝试使用媒体查询来隐藏打印时的 YYYYMMDD <link rel="stylesheet" type="text/css" media="print" href="print-hide.css">
有@waxi 问题的解决方案吗？我面临同样的问题

【解决方案2】：

您应该使用 HTML5 数据属性。 https://www.datatables.net/examples/advanced_init/html5-data-attributes.html

只需将 data-order 元素添加到您的 td 元素。
不需要插件。

<table class="table" id="exampleTable">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Sign Up Date</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>Peter</td>
            <td data-order="2015-11-13 12:00">13. November 2015</td>
        </tr>
        <tr>
            <td>Daniel</td>
            <td data-order="2015-08-06 13:44">06. August 2015</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td data-order="2015-10-14 16:12">14. October 2015</td>
        </tr>
    </tbody>
</table>


<script>
    $(document).ready(function() {
        $('#exampleTable').DataTable();
    });
</script>

【讨论】：

您节省了我的时间，也为我工作，轻松正确地对日期进行排序！
这适用于 ID 字段吗？
我通过 REST 将数据保存在 JSON 中，因此我无法控制标记（我认为是这样）。我的数据在“td”标签里面，我不能在“td”里面添加属性，那怎么用呢？
最简单最好的解决方案，不需要额外的插件或隐藏字段。
我只是想加上我的 0.02 美元，然后说说这段代码是多么的救命稻草。我不知道这个属性存在。

【解决方案3】：

点击Date (dd/mm/YYY)下的“显示详细信息”链接，然后您可以复制并粘贴那里提供的插件代码

更新：我认为您可以像这样切换数组的顺序：

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) {
    var usDatea = a.split('/');
    var usDateb = b.split('/');

    var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
    var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
    var usDatea = a.split('/');
    var usDateb = b.split('/');

    var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
    var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

我所做的只是切换__date_[1]（日）和__date_[0]（月），并将uk 替换为us，这样您就不会感到困惑了。我认为这应该会为您解决。

更新 #2：您应该能够只使用日期对象进行比较。试试这个：

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

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

【讨论】：

我会在几分钟内查看您的答案。在切换之前，我实际上是在使用 tablesorter。我切换是因为我需要使用搜索插件，并且我发现在使用搜索插件时动态添加行到 tablesorter 非常困难。
那么我如何将这个小时和分钟添加到这个等式中？
试试我的新更新...我还没有测试过，但它应该可以工作。

【解决方案4】：

我意识到这是一个两年前的问题，但我仍然觉得它很有用。我最终使用了 Fudgey 提供的示例代码，但使用了一个小模块。节省了我一些时间，谢谢！

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) { 
  var x = new Date($(a).text()),
  y = new Date($(b).text());
  return ((x < y) ? -1 : ((x > y) ?  1 : 0)); 
}; 

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) { 
  var x = new Date($(a).text()),
  y = new Date($(b).text());
  return ((x < y) ? 1 : ((x > y) ?  -1 : 0)); 
};

【讨论】：

【解决方案5】：

截至 2015 年，据我所知，对 DataTable 中的日期列进行排序的最方便的方法是使用 required sort plugin。由于我的日期格式是dd/mm/yyyy hh:mm:ss，因此我最终使用了date-euro plugin。只需：

第1步：包含排序插件JavaScript file或代码和；

第 2 步：如下所示添加columnDefs 以定位相应的列。

$('#example').dataTable( {
    columnDefs: [
       { type: 'date-euro', targets: 0 }
    ]
});

【讨论】：

* 请注意此插件已*已弃用。 * datetime 插件提供增强的 * 功能和灵活性。

【解决方案6】：

仅适用于预加载的 html 表格，如果您使用 ajax，这不是答案

数据表只能按“ISO-8601”格式的DateTime排序，因此您必须将“date-order”中的日期转换为这种格式（例如使用Razor）：

<td data-sort="@myDate.ToString("o")">@myDate.ToShortDateString() - @myDate.ToShortTimeString()</td>

【讨论】：

【解决方案7】：

以防万一有人在日期值或单元格中有空格时遇到问题，您将不得不处理这些位。有时，来自 html 的修剪功能不会处理空白空间，就像“$nbsp;”一样。如果你不处理这些，你的排序将无法正常工作，并且会在有空白的地方中断。

我也从这里的 jquery 扩展中获得了这段代码，并对其进行了一些修改以满足我的要求。你也应该这样做：）干杯！

function trim(str) {
    str = str.replace(/^\s+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
        if (/\S/.test(str.charAt(i))) {
            str = str.substring(0, i + 1);
            break;
        }
    }
    return str;
}

jQuery.fn.dataTableExt.oSort['uk-date-time-asc'] = function(a, b) {
    if (trim(a) != '' && a!="&nbsp;") {
        if (a.indexOf(' ') == -1) {
            var frDatea = trim(a).split(' ');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
        }
        else {
            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 = 10000000; // = l'an 1000 ...
    }

    if (trim(b) != '' && b!="&nbsp;") {
        if (b.indexOf(' ') == -1) {
            var frDateb = trim(b).split(' ');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
        }
        else {
            var frDateb = trim(b).split(' ');
            var frTimeb = frDateb[1].split(':');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
        }
    } else {
        var y = 10000000;
    }
    var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
    return z;
};

jQuery.fn.dataTableExt.oSort['uk-date-time-desc'] = function(a, b) {
    if (trim(a) != '' && a!="&nbsp;") {
        if (a.indexOf(' ') == -1) {
            var frDatea = trim(a).split(' ');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
        }
        else {
            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 = 10000000;
    }

    if (trim(b) != '' && b!="&nbsp;") {
        if (b.indexOf(' ') == -1) {
            var frDateb = trim(b).split(' ');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
        }
        else {
            var frDateb = trim(b).split(' ');
            var frTimeb = frDateb[1].split(':');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
        }
    } else {
        var y = 10000000;
    }

    var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
    return z;
};

【讨论】：

【解决方案8】：

关于更新#1，有两个问题：

天数 = 1 (d/MM/YYYY) 而不是 (dd/MM/YYYY)
空日期

这是避免这些问题的解决方案：

jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function (a, b) {
            var ukDatea = a.split('/');
            var ukDateb = b.split('/');

            //Date empty
             if (ukDatea[0] == "" || ukDateb[0] == "") return 1;

            //need to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) 
            if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; 
            if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];

            var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        };

        //Sorting by Date 
        jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function (a, b) {
            var ukDatea = a.split('/');
            var ukDateb = b.split('/');

             //Date empty
             if (ukDatea[0] == "" || ukDateb[0] == "") return 1;

            //MANDATORY to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) 
            if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; 
            if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];

            var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

            return ((x < y) ? 1 : ((x > y) ? -1 : 0));
        };

【讨论】：

【解决方案9】：

点击链接 https://datatables.net/blog/2014-12-18

集成按日期排序的非常简单的方法。

<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>

在初始化数据表之前放入这段代码：

$(document).ready(function () {
    // ......
    $.fn.dataTable.moment('DD-MMM-YY HH:mm:ss');
    $.fn.dataTable.moment('DD.MM.YYYY HH:mm:ss');
    // And any format you need
}

【讨论】：

【解决方案10】：

将列的type指定为type: 'date'：

{title: 'Expiration Date', data: 'ExpirationDate', type: 'date'}

【讨论】：

【解决方案11】：

创建一个隐藏列“dateOrder”（例如），日期为字符串，格式为“yyyyMMddHHmmss”，并使用属性“orderData”指向该列。

var myTable = $("#myTable").dataTable({
 columns: [
      { data: "id" },
      { data: "date", "orderData": 4 },
      { data: "name" },
      { data: "total" },
      { data: "dateOrder", visible: false }
 ] });

【讨论】：

【解决方案12】：

经过一整天的工作，我得到了解决方案。这是一个小小的 hacky 解决方案在 td 标签内添加了 span

<td><span><%= item.StartICDate %></span></td>.

我使用的日期格式是 dd/MM/YYYY。在Datatables1.9.0中测试

【讨论】：

【解决方案13】：

我的表中有 10 列，并且有 2 列日期，第 2 列和第 4 列是美国日期，所以这对我来说很好。只需将此代码最后以相同的顺序粘贴到您的脚本部分即可。

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


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


    $('#tblPoSetupGrid').dataTable({
        columnDefs: [
            { type: 'us_date', targets: 3 },
            { type: 'us_date', targets: 1 }
        ]

    });

【讨论】：