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

Posted 2023-05-07

【中文标题】Jquery数据表排序不适用于日期列？

【英文标题】：Jquery datatable Sort not working for Date Column?

【发布时间】：2018-11-22 23:07:29

【问题描述】：

我有一个 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: [],

);

【问题讨论】：

你能把你的代码贴在这里吗？

还要加html代码！！

@BhumiShah 请看我已经编辑了我的问题。

我的意思是你的回应。我想看看你的日期格式

在我的情况下，我们如何在 jquery 数据表中对不同的日期格式进行排序，特别是这个（2018 年 2 月 16 日）？

【参考方案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 属性中更好地表达。事实上，同时提供两者也可能会导致您的问题，因为您正在以一种方式设置列属性，然后通过其他方式更改它的工作方式。

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

$(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" >
    <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>

【讨论】：

简单直接，逻辑正确。谢谢。我将它用作列的一部分：[“data”：“dateEstb”，“type”：“date”]，后跟“order”：[[9，“desc”]]。基本上它说该列是日期类型，并且根据类型应用排序。

【参考方案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
        ]
    );
);

【讨论】：

我同意知道可以基于另一列对一列进行排序可能很有用，但在这种情况下，以不同格式将相同数据作为附加列传递似乎非常低效，尤其是对于大型数据集。

【参考方案3】：

这个答案有效：https://***.com/a/25319252/1554947

        var table = $('#table');
        table = table.DataTable(
            columns: [
                 data: "link" ,
                 data: "code" ,
                 data: "entryDateTime" 
            ],
            columnDefs: [
                
                    targets: 2,
                    render: function (data, type) 
                        if (type == "display") 
                            var date = new Date(data);
                            var options =  year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric" ;
                            return date.toLocaleDateString('tr-TR', options);
                        

                        return data;
                    
                
            ],
            order: [[2, "desc"]] // default order when page loaded
        );