如何使用DataTables jquery插件按Date排序？

Question

我正在使用datatables 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));
};

Answer 1

日期排序 - 带有隐藏元素

将日期转换为YYYYMMDD格式并添加到实际值(MM/DD/YYYY)中<td>,将其包装在元素中,将样式设置display:none;为元素.现在日期排序将作为正常排序.同样可以应用于日期时间排序.

HTML

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

CSS

#data-table span {
    display:none; 
}

Answer 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>

Answer 3

点击日期(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));
};

Answer 4

我意识到这是一个两年前的问题,但我仍然发现它很有用.我最终使用了Fudgey提供的示例代码但是使用了一个小mod.救了我一些时间,谢谢!

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)); 
}; 

Answer 5

截至2015年,根据我在DataTable中对Date列进行排序的最方便的方法是使用所需的排序插件.由于我的日期格式是dd/mm/yyyy hh:mm:ss,我最终使用了date-euro插件.所有人需要做的是:

第1步:包含排序插件JavaScript文件或代码;

步骤2:columnDefs如下所示添加以定位适当的列.

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

Answer 6

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

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