Jquery Sortable table，只会对一个日期列进行排序

Posted 2023-05-07

【中文标题】Jquery Sortable table，只会对一个日期列进行排序

【英文标题】：Jquery Sortable table, will only sort one date column

【发布时间】：2019-11-04 05:07:22

【问题描述】：

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

2019 年 1 月 5 日

2019 年 1 月 6 日

2019 年 3 月 5 日

2019 年 4 月 6 日

06/05/2019

2019 年 6 月 6 日

08/05/2019

2019 年 9 月 5 日

完整代码请见 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 插件

所以 Scanned 列工作正常，Dispatched 没有

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

【问题讨论】：

因为 Dispatched 列不只包含日期 <td class="goneaway">TBA</td>

经过测试，您是正确的。有可能对此做些什么吗？这是通过 XML 输入的 API 数据，然后我们将其作为表格输出供用户查看。所以列将有待定。如果 TBA 在它忽略的列中，我们能做些什么吗？或任何东西

【参考方案1】：

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

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