JQuery DataTables：添加 columnDefs 后无法对列进行排序

Question

我的 Rails 应用程序中有一个表格，它显示一列日期，以美国长格式（月 DD，YYYY）写成。

使用默认数据表，我注意到这些日期字符串是按字母顺序排序的，而不是按日期排序的。单击列标题将按预期按升序或降序对这些字符串进行排序，但按字母顺序排列。

我尝试通过修改我的 CoffeeScript 以包含 columnDefs 来使数据表按日期正确排序，如下所示：

  $('.scheduled_activities').dataTable(
    columnDefs: [ { 'type': 'date', 'targets': 0 } ]
  )

修改脚本后，数据表现在按升序显示日期。但是，单击列标题并没有任何作用——日期不是按降序排列的。

如何让数据表将列值识别为日期，同时通过单击列标题保留按 asc/desc 顺序排序的能力？我正在使用 JQuery 1.11.2，并且我想坚持使用尽可能少的依赖项的解决方案，因此使用像 moment.js 这样的库是最后的手段。感谢您的帮助。

Answer 1

选项 1： 如果您查看https://www.datatables.net/manual/options，可以选择将 order 设置为 true 或 false，只需将 order 设置为 false。

//Example
$('#example').DataTable( {
  ordering: false
} );

这里我们通过以下方式禁用 DataTables 的排序功能 默认情况下，您甚至可以通过将 'searching' 设置为 false 来禁用搜索

选项 2 如果您发现在选项一中禁用了列排序，则将 ordering: false 行替换为 "aaSorting": [] 所以变成：

 $('#example').DataTable( {
  "aaSorting": []
} );

有关选项 2 的更多信息，请关注此文档https://legacy.datatables.net/ref#aaSorting

Answer 2

DataTables 无法对我的列进行排序，因为列中的日期实际上是通过 Rails link_to 帮助程序创建的链接，而不是简单的字符串。

我为我的columnDefs 尝试了不同的types，但没有一个可以正确解释一列链接。我突然想到，我可以取消链接日期字符串并创建第二列，其中包含链接到日期所指对象的link_to。虽然这种方法在技术上满足了日期在提供对基础对象的访问的同时可排序的要求，但在第二列中包含一系列链接在美学上令人不快，主要是因为我的应用程序中的其他表都没有强制用户单击辅助链接。

碰巧，DataTables 1.10+ can leverage HTML 5 data attributes 提供一条数据用于排序，同时在 <td> 标记之间显示不同的数据。

旧代码：

<% @schedulable_activities.each do | activity | %>
  <tr>
    <td>
      <%= link_to "#{localize_date(activity.start_date)}", activity_path(activity) %>
    </td>
  </tr>
<% end %>

新代码：

<% @schedulable_activities.each do | activity | %>
  <tr>
    <td data-order="<%= activity.start_date%>">
      <%= link_to "#{localize_date(activity.start_date)}", activity_path(activity) %>
    </td>
  </tr>
<% end %>

注意<td> 标记中的data-order 属性。

通过此更改，我可以恢复到对 DataTables 的“普通 Jane”调用，而完全不必依赖 columnDefs：

$ ->
  $('.scheduled_activities').dataTable()

现在，通过单击列标题，我得到了一个按日期按升序和降序正确排序的表格，以及指向与日期关联的对象的直接链接。

Answer 3

不确定coffee 语法，但在javascript 中该语法无效。缺少{} 来定义columnDefs 是其属性的对象

$('.scheduled_activities').dataTable({
    columnDefs: [ { 'type': 'date', 'targets': 0 } ]
});