Таблица сортировки Jquery, будет сортировать только один столбец даты - PullRequest
1 голос
/ 21 июня 2019

У нас есть таблица из 4 столбцов 2 столбца - это даты, но только один будет отсортирован правильно (дд / мм / гггг). Другой просто вроде сортирует по номеру

01/05/2019

01/06/2019

03/05/2019

04/06/2019

06/05/2019

06/06/2019

08/05/2019

09/05/2019

для получения полного кода см. Jsbin https://output.jsbin.com/wukixox/ или https://codepen.io/Chazlie/pen/GbWZWa

<div class="tracking-table" id="tracking-table-style">
 <div id="test-table-2">

<table id ="table-tracking" class="container sortable">
  <thead>
    <tr>


 <th class="complete"> complete</th>
 <th class="process"> process</th>
 <th class="scanned"> scanned</th>
 <th class="goneaway"> despatch date</th>

   </tr>
  </thead>
  <tbody>   
        <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">31/05/2019</td>
<td class="goneaway">06/06/2019</td>
  </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">02/05/2019</td>
<td class="goneaway">09/05/2019</td>
 </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">02/05/2019</td>
<td class="goneaway">09/06/2019</td>
 </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">02/05/2019</td>
<td class="goneaway">08/05/2019</td>
 </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">02/05/2019</td>
<td class="goneaway">09/05/2019</td>
 </tr> 
    <tr>

<td class="complete">False</td>
<td class="process">Pattern Matching</td>
<td class="scanned">17/06/2019</td>
<td class="goneaway">27/06/2019</td>
  </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">25/04/2019</td>
<td class="goneaway">06/05/2019</td>
 </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">13/06/2019</td>
<td class="goneaway">04/06/2019</td>

 </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">13/06/2019</td>
<td class="goneaway">03/05/2019</td>
 </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">29/05/2019</td>
<td class="goneaway">01/05/2019</td>
  </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">29/05/2019</td>
<td class="goneaway">01/06/2019</td>
 </tr> 
    <tr>

<td class="complete">False</td>
<td class="process">TOP OF FABRIC QUERY</td>
<td class="scanned">11/06/2019</td>
<td class="goneaway">TBA</td>
  </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">16/05/2019</td>
<td class="goneaway">16/05/2019</td>
  </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">16/05/2019</td>
<td class="goneaway">17/06/2019</td>
 </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">16/05/2019</td>
<td class="goneaway">18/05/2019</td>
 </tr> 
    <tr>

<td class="complete">True</td>
<td class="process">DD CARRIER</td>
<td class="scanned">16/05/2019</td>
<td class="goneaway">19/06/2019</td>
  </tr> 

</tbody>
</table> </div></div>

JQuery:

  $(document).ready(function() {
    $.fn.dataTable.moment( 'DD/MM/YYYY' );

    $('#table-tracking').DataTable( {
        "bLengthChange": false,
        "pageLength": 25,
    });
} );

Используется плагин datatables Jquery

Таким образом, столбец "Сканированные" работает нормально, а "Отправленные" - не

редактируемый JSbin https://jsbin.com/wukixox/edit?html,js,output

1 Ответ

0 голосов
/ 21 июня 2019

Проблема в том, что в столбце даты отправки нет форматированных строковых данных, поэтому datatable не будет анализировать их как столбец даты.

РЕШЕНИЕ 1: Вы можете отделитьВаши отображаемые данные и данные, которые используются алгоритмом сортировки.Вам нужно добавить атрибут данных всех ваших тд из 4-х столбцов, который должен содержать только строки даты.В вашем случае вы должны написать, например: 00/00/0000 на тд, которые не имеют строки в формате даты.Дополнительная информация: https://datatables.net/manual/data/orthogonal-data

...
<tr>
    ...
    <td data-order="00/00/0000" class="goneaway">TBA</td> //Check the data-order attribute's value
</tr>
<tr>
    ...
    <td data-order="06/06/2019" class="goneaway">06/06/2019</td>
</tr>
...
</tbody>

Лучшее решение , если вы напишите собственный алгоритм сортировки.Пример: Реализация пользовательского sSortType и функции сортировки для jQuery dataTables

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...