Jquery 数据表排序不适用于日期列? [英] Jquery datatable Sort not working for Date Column?

问题描述

我有一个 jquery 数据表，其中日期列格式为 2018 年 2 月 16 日，但在对其进行排序时，它没有正确排序.

我使用了此处

提到的所有日期相关的列类型

但似乎没有任何效果.我该如何解决?

这是代码

<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;"宽度:100%;><头><tr><th style="width: 1px !important;"class="tblth">锶</th><th class="tblth" style="width:13% !important;">日期<i class="fa fa-fw fa-sort"></i></th></tr></thead><tbody class="dtbody tblth" style="color: #004D6B;"></tbody>

var table = $("#JsDataTable").DataTable({scrollY: '50vh',滚动折叠:真，aaData":响应，"pagingType": "full_numbers","dom": '<"top"i>rt<"bottom"flp><"clear">',"sDom": 'Rfrtlip',bInfo":真，长度菜单":[[10, 20, 30, -1],[10, 20, 30, 全部"]],列定义":[{可搜索":假，可订购":假，目标":[0, 1, 2, 3, 4],类型":自然"}],命令": [[1, '升序']],aoColumns":[{mData":空},{"mData": "日期",'bSortable':真，"sType": "自然"},],搜索":真的，分页":真的，bAutoWidth":假，固定列":假，//命令: []，});

解决方案

你可以这样做:

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

iDataSort 属性用于您希望一列按另一列中包含的数据排序的情况.第二列通常会被隐藏.

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

$(document).ready(function() {变量数据集 = [[Test1"、2011 年 4 月 25 日"、20110425"]、[Test2"、2011 年 2 月 10 日"、20110210"]、[Test3"、2012 年 4 月 20 日"、20120420"]、[Test4"、2018 年 2 月 16 日"、20180216"]、];var myTable;myTable = $('#example').DataTable({数据:数据集，命令": [[1, '升序']],"aoColumns": [null, {'iDataSort':2}, {bVisible":假}]});});

I Have a jquery datatable where date column format is Feb 16, 2018 but when it is sorted it is not getting sorted correctly.

I have used all date related column types mentioned Here

But Nothing seems to work. How can I resolve it?

Here is the code

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

});

解决方案

You can do it this way:

In this demo, I have taken one invisible field with ymdhis format of date and pass iDataSort with next invisible field so your date will be sorted with that field.

The iDataSort property is used for cases where you want one column to be sorted by the data contained in another column. This second column, will typically be hidden.

DEMO: 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
        }]
    });
});

这篇关于Jquery 数据表排序不适用于日期列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！