Jquery 数据表排序不适用于日期列？

Question

我有一个 jquery 数据表，其中日期列格式为 2018 年 2 月 16 日，但是当它被排序时，它没有被正确排序。

我已经使用了这里提到的所有与日期相关的列类型

但似乎没有任何效果。我该如何解决？

这是代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body btnsize">
  <table class="table table-striped table-bordered dttable" id="JsDataTable" style="border-radius: 17px 17px 0 0; border-style: solid; border-color: #fcfdfa;" width:100%;>
    <thead>
      <tr>
        <th style="width: 1px !important;" class="tblth">
          Sr
        </th>
        <th class="tblth" style="width:13% !important;">
          Date <i class="fa fa-fw fa-sort"></i>
        </th>
      </tr>
    </thead>
    <tbody class="dtbody tblth" style="color: #004D6B;">
    </tbody>
  </table>
</div>

var table = $("#JsDataTable").DataTable({
  scrollY: '50vh',
  scrollCollapse: true,
  "aaData": response,
  "pagingType": "full_numbers",
  "dom": '<"top"i>rt<"bottom"flp><"clear">',
  "sDom": 'Rfrtlip',
  "bInfo": true,
  "lengthMenu": [
    [10, 20, 30, -1],
    [10, 20, 30, "All"]
  ],
  "columnDefs": [{
    "searchable": false,
    "orderable": false,
    "targets": [0, 1, 2, 3, 4],
    "type": 'natural'
  }],
  "order": [
    [1, 'asc']
  ],
  "aoColumns": [{
      "mData": null
    },
    {
      "mData": "Date",
      'bSortable': true,
      "sType": "natural"
    },
  ],
  "searching": true,
  "paging": true,
  "bAutoWidth": false,
  "fixedColumns": false,
  //order: [],

});

Answer 1

问题可能出在您的columnDefs作业中。

"columnDefs": [{
     "searchable": false,
     "orderable": false,
     "targets": [0, 1, 2, 3, 4],
     "type": 'natural'
}],

您正在使用术语"type": 'natural'，这意味着在执行排序时，它只是按字母数字顺序对数据进行排序。

例如，日期Dec 16, 2018实际上将排序为小于Feb 16, 2018，您可以通过进行简单的字符串比较来查看。

"Dec 16, 2018" < "Feb 16, 2018" = true

由于您使用的是 moment.js，您将需要调整 columnDefs，以便为 DateTime 格式的列分配分配"type": "date"。

"columnDefs": [
    //non-date fields
    {
        "searchable": false,
        "orderable": false,
        "targets": [0, 2, 3, 4],
        "type": 'natural'
     },
     //date-fields
     {
        "searchable": false,
        "orderable": true,
        "targets": 1,
        "type": 'date'
     }
],

此外，您不需要该aoColumns属性。aoCoulumns是columnDefs的旧版本。中的所有信息在属性中aoColumns得到更好的表达columnDefs。事实上，同时提供两者也可能会导致您的问题，因为您以一种方式设置列属性，然后通过其他方式更改其工作方式。

这是一个如何使用日期类型的简单示例。

"columnDefs": [{
     "searchable": false,
     "orderable": false,
     "targets": [0, 1, 2, 3, 4],
     "type": 'natural'
}],

"Dec 16, 2018" < "Feb 16, 2018" = true

Answer 2

你可以这样做：

在此演示中，我采用了一个具有 ymdhis 日期格式的不可见字段，并将iDataSort与下一个不可见字段一起传递，以便您的日期将与该字段一起排序。

iDataSort 属性用于希望一列按另一列中包含的数据进行排序的情况。第二列通常是隐藏的。

演示： https: //codepen.io/creativedev/pen/OEgmdX

$(document).ready(function() {
    var dataSet = [
        ["Test1", "25 Apr 2011", "20110425"],
        ["Test2", "10 Feb 2011", "20110210"],
        ["Test3", "20 Apr 2012", "20120420"],
        ["Test4", "16 Feb 2018", "20180216"],
    ];
    var myTable;

    myTable = $('#example').DataTable({
        data: dataSet,
        "order": [
            [1, 'asc']
        ],
        "aoColumns": [null, {
            'iDataSort': 2
        }, {
            "bVisible": false
        }]
    });
});