Jquery datatable Сортировка не работает для столбца даты? - PullRequest
Новая
       12

Jquery datatable Сортировка не работает для столбца даты?

0 голосов
/ 13 июня 2018

У меня есть таблица данных jquery, где формат столбца даты - 16 февраля 2018 года, но при сортировке он сортируется неправильно.

Я использовал все упомянутые типы столбцов, связанных с датой Здесь

Но, похоже, ничего не работает.Как я могу решить это?

Вот код 

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

});

Ответы [ 2 ]

0 голосов
/ 14 июня 2018

Вы можете сделать это следующим образом:

В этой демонстрации я взял одно невидимое поле с форматом даты ymdhis и передал iDataSort со следующим невидимым полем, чтобы ваша дата была отсортированас этим полем.

Свойство iDataSort используется для случаев, когда вы хотите отсортировать один столбец по данным, содержащимся в другом столбце.Этот второй столбец, как правило, будет скрыт.

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
        }]
    });
});
0 голосов
/ 13 июня 2018

Возможно, проблема в вашем 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

Поскольку вы используете момент.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" 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>
...