时间戳

首页 > 解决方案 > 如果我将“NA”或“---”添加为空日期值，则 jQuery 数据表时刻日期格式排序插件不起作用

javascript - 如果我将“NA”或“---”添加为空日期值，则 jQuery 数据表时刻日期格式排序插件不起作用

问题描述

我在我的应用程序中使用了 jQuery Datatable 和数据表的 momentjs 日期格式插件进行日期排序。数据表排序是为客户端站点实现的（排序应该发生在 DOM 中，而不是根据服务器请求和加载数据）。因此，如果我将空字符串设置为td日期列中的数据表元素之一的值，那么它可以正常工作，但是当我将值设置为“NA”或“---”而不是空值时，排序工作不正常。

Check code on jsfiddle

https://jsfiddle.net/ranjit_redekar/b0p3qLtg/16/

当我使用任何字符串时不起作用（例如'---'）

不工作的例子

当我使用空字符串时排序有效 工作示例

标签： javascriptjquerydatatables

解决方案

当只有有效日期时，基于日期的排序工作正常。如果列中只有一个字符串，DataTable 会退回到“正常”排序方法：作为字符串。

要解决此问题，您将使用隐藏列对可见列进行排序。

我将此答案中的代码改编为您的代码：

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

  $('.happyTable').DataTable({
    columnDefs: [
      { targets: 1, orderData: 2 },  // It says that column 1 will be ordered based on column 2
      { targets: 2, visible: false } // It says column 2 is hidden
    ]
  });
});
<link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>

<table class="happyTable" cellpadding="1" cellspacing="1">
  <thead>
  <tr>
    <th>Name</th>
    <th>Date</th>
    <th>Hidden column</th><!-- Add a column here -->
    <th>ZIP</th>
    <th>Other</th>
  </tr>
    </thead>
  <tbody>
  <tr>
    <td>Merritt Molina</td>
    <td>26/12/15</td>
    <td>26/12/15</td><!-- When you have a valid date, use it -->
    <td>99266</td>
    <td>72341402999</td>
  </tr>
  <tr>
    <td>Lamar Ryan</td>
    <td>24/09/16</td>
    <td>24/09/16</td>
    <td>91870</td>
    <td>04890349099</td>
  </tr>
  <tr>
    <td>Theodore Thornton</td>
    <td>14/10/16</td>
    <td>14/10/16</td>
    <td>76266</td>
    <td>22437000299</td>
  </tr>
  <tr>
    <td>Boris Harrell</td>
    <td>19/11/16</td>
    <td>19/11/16</td>
    <td>82000</td>
    <td>55735640699</td>
  </tr>
  <tr>
    <td>Oren Conner</td>
    <td>08/09/16</td>
    <td>08/09/16</td>
    <td>56717</td>
    <td>18666997199</td>
  </tr>
  <tr>
    <td>Alfonso Dawson</td>
    <td>---</td> <!-- visible, use any character you want -->
    <td></td> <!-- hidden, used to order. Leave empty -->
    <td>28491</td>
    <td>58270268699</td>
  </tr>
  <tr>
    <td>Cole Perez</td>
    <td>24/08/15</td>
    <td>24/08/15</td>
    <td>54977</td>
    <td>26553861699</td>
  </tr>
  <tr>
    <td>George Bauer</td>
    <td>10/12/15</td>
    <td>10/12/15</td>
    <td>26482</td>
    <td>54456979799</td>
  </tr>
  <tr>
    <td>Wing Summers</td>
    <td>10/02/16</td>
    <td>10/02/16</td>
    <td>83752</td>
    <td>29425569399</td>
  </tr>
  <tr>
    <td>Bert Golden</td>
    <td>24/09/15</td>
    <td>24/09/15</td>
    <td>23673</td>
    <td>66513793199</td>
  </tr>
    </tbody>
</table>

推荐阅读