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

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

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

但似乎没有任何作用。我该如何解决？

这是代码

<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: [],

});

问题可能出在你的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 is the 旧版本的columnDefs。所有信息都在aoColumns更好地表达为columnDefs属性。事实上，提供两者也可能会导致您的问题，因为您以一种方式设置列属性，然后通过其他方式更改其工作方式。

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

$(document).ready( function () {
  var table = $('#example').DataTable({
    columnDefs: [{
        "targets": 1,
        "type": 'date',
     }]
  });
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

<div class="container">
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>id</th>
        <th>Date</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>id</th>
        <th>Date</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>1</td>
        <td>Dec 16, 2018</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Jan 16, 2018</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Feb 16, 2018</td>
      </tr>
      <tr>
        <td>3</td>
        <td>June 16, 2018</td>
      </tr>
      <tr>
        <td>4</td>
        <td>June 16, 2017</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Dec 16, 2016</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Jan 16, 2016</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Feb 16, 2016</td>
      </tr>
    </tbody>
  </table>
</div>