Question

我在应用程序中使用jQuery Datatable和data table的momentjs日期格式插件对日期进行了排序。数据表排序是针对客户端站点实现的（排序应在DOM中进行，而不是应服务器的要求并加载数据）。因此，如果我将一个空字符串设置为日期列中数据表td元素之一的值，则它可以正常工作，但是当我将该值设置为'NA'或'---'而不是一个空值，则排序无法正常工作。

Check code on jsfiddle

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

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

使用空字符串时排序有效

Answer 1

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

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

我将this answer中的代码修改为您的代码：

$(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>

Answer 2

尝试为这些值安装定制渲染器。这将使排序代码看到Date对象（因此它将正确排序）。然后，渲染器将处理null / empty值，显示所需的任何字符串。

请参见https://datatables.net/manual/data/renderers

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

2 个答案: