Question

我们有一个4列的表格 2列是日期，但是只有一列可以正确排序（dd / mm / yyyy）。另一个似乎只是按数字排序

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,
    });
} );

这使用数据表Jquery插件

因此“扫描”列工作正常，“分派”无效

可编辑的JSbin https://jsbin.com/wukixox/edit?html,js,output

Answer 1

问题在于，发货日期的列中包含非日期格式的字符串数据，因此datatable不会将其解析为日期列。

解决方案1： 您可以将显示的数据和排序算法使用的数据分开。您需要从第4列添加所有td的data属性，该属性应仅包含日期字符串。在您的情况下，您应该在没有日期格式的字符串的td上写例如：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>

更好的解决方案（如果您编写自己的排序算法）。例： Implementing a custom sSortType and sort function for jQuery dataTables

jQuery Sortable表，将仅对一个日期列进行排序

1 个答案: