日期未在 DataTables 中排序答案

【问题标题】：Dates not sorting in DataTables日期未在 DataTables 中排序
【发布时间】：2017-12-08 19:16:16
【问题描述】：

我的 DataTables 中的日期没有按应有的方式排序？我正在使用 AJAX，这里是使用的有效负载：

{"data": [["5/24/2017","<a href='bulletin_edit.aspx?id=19'>0</a>","Uncategorized","Owners","New bulletin","No expiration","<button type='button' class='btn btn-xs btn-primary' onclick='archiveCircular(19);'>Archive</button>","<button type='button' class='btn btn-xs btn-info' onclick='showBBDetails(19);'>Show</button>"],["3/2/2016","<a href='bulletin_edit.aspx?id=13'>0</a>","Advisory","Everyone","New system update","No expiration","<button type='button' class='btn btn-xs btn-primary' onclick='archiveCircular(13);'>Archive</button>","<button type='button' class='btn btn-xs btn-info' onclick='showBBDetails(13);'>Show</button>"],["3/2/2016","<a href='bulletin_edit.aspx?id=12'>0</a>","Advisory","Everyone","First day of access","No expiration","<button type='button' class='btn btn-xs btn-primary' onclick='archiveCircular(12);'>Archive</button>","<button type='button' class='btn btn-xs btn-info' onclick='showBBDetails(12);'>Show</button>"],["11/4/2015","<a href='bulletin_edit.aspx?id=8'>0</a>","Advisory","Everyone","Door fixing in the lobby","No expiration","<button type='button' class='btn btn-xs btn-primary' onclick='archiveCircular(8);'>Archive</button>","<button type='button' class='btn btn-xs btn-info' onclick='showBBDetails(8);'>Show</button>"],["11/4/2015","<a href='bulletin_edit.aspx?id=7'>0</a>","Uncategorized","Everyone","Facade painting today","No expiration","<button type='button' class='btn btn-xs btn-primary' onclick='archiveCircular(7);'>Archive</button>","<button type='button' class='btn btn-xs btn-info' onclick='showBBDetails(7);'>Show</button>"],["5/4/2015","<a href='bulletin_edit.aspx?id=6'>0</a>","Advisory","Everyone","Repainting of Balconies","No expiration","<button type='button' class='btn btn-xs btn-primary' onclick='archiveCircular(6);'>Archive</button>","<button type='button' class='btn btn-xs btn-info' onclick='showBBDetails(6);'>Show</button>"],["5/4/2015","<a href='bulletin_edit.aspx?id=5'>0</a>","Uncategorized","Everyone","Insect Fuming again","No expiration","<button type='button' class='btn btn-xs btn-primary' onclick='archiveCircular(5);'>Archive</button>","<button type='button' class='btn btn-xs btn-info' onclick='showBBDetails(5);'>Show</button>"],["5/4/2015","<a href='bulletin_edit.aspx?id=4'>0</a>","Uncategorized","Everyone","Annual Meeting 2015","No expiration","<button type='button' class='btn btn-xs btn-primary' onclick='archiveCircular(4);'>Archive</button>","<button type='button' class='btn btn-xs btn-info' onclick='showBBDetails(4);'>Show</button>"]]}

表格呈现没有问题。但是，如果我尝试在第一个日期单元格上进行排序，就会出错（附上截图）。

这里是初始化代码：

var uriActive = "ajax/bulletinpost/get_active.aspx";
tActive = $('#tblActive').DataTable({
    "ajax": uriActive,
    dom: 'Bfrtip',
    buttons: [{ extend: 'excelHtml5', title: 'Data export' }, { extend: 'pdfHtml5', title: 'Data export' }],
    "deferRender": true,
    "lengthMenu": [[50, 100, 150, 200, 250, -1], [50, 100, 150, 200, 250, "All"]],
    "iDisplayLength": 50,
    "order": [],
    "columnDefs": [{ "targets": 'no-sort', "orderable": false }, { "searchable": false, "targets": [1,6,7] }],
    "fnDrawCallback": function (oSettings) {
        $('[data-toggle="popover"]').popover({ 'trigger': 'hover', 'placement': 'top' });
        $('.editable').editable({ mode: 'popup' });
    }
});

日期格式为mm/dd/yyyy。有人知道吗？

【问题讨论】：

您尝试使用data-order attribute 吗？如果您将日期的 unix 时间戳存储在那里，它应该可以正常订购。
没试过，怎么弄进去？你能给我一个使用有效载荷的例子吗（当然只是其中的一行）？
如果您检查我添加的链接并转到 HTML 选项卡，您可以在“开始日期”和“工资”列上data-order="..."。在您的情况下，它的工作方式会有所不同，因为您使用的是 AJAX，但this 帖子可能会帮助您。
或者只使用返回 Date.parse( data.replace('/', '-') ) 类型的渲染 sort ....
大卫，你认为是 / 造成的吗？你能根据我上面的代码提供一个例子吗？

标签： datatables

【解决方案1】：

默认情况下，只有可使用Date.parse() 解析的字符串才会被识别为日期。 mm/dd/yyyy 不是可解析的日期格式。具有某种形式的“奇数”日期格式的列需要自行执行解析，例如使用插件。

但实际上并没有什么花招。只需在 render 回调中解析日期并将解析的日期作为整数值返回：

"columnDefs": [
  { targets: 0, 
    type: 'num',
    render: function(data,type) {
      if (type == 'sort') return Date.parse( data.replace('/', '-').valueOf() )
      return data
    }
  },   
  { "targets": 'no-sort', "orderable": false }, 
  { "searchable": false, "targets": [1,6,7] }
],

现在日期已按应有顺序排序 -> http://jsfiddle.net/t34h6yuj/

注意：显然，您应该在 render 回调中对 data 执行某种健全性检查。至少检查服务器是否返回了null 值。

【讨论】：