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

Question

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

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

我试图通过修改我的 CoffeeScript 以包含 columnDef 来让数据table 正确地按日期排序，如下所示：

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

更改脚本后，数据table 现在以升序显示日期。然而，单击 header 列完全没有任何作用 -- 日期未按降序排列。

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

Answer 1

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

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

Answer 2

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

我为我的 columnDefs 尝试了不同的 types，但其中 none 可以正确解释 link 的列。我突然想到我可以 de-link 日期字符串并创建第二列，其中 link_to link 编辑到日期所指的 object。虽然这种方法在技术上满足了日期都是 sortable 的要求，同时提供了对底层 object 的访问，但在第二列中有一系列 link 在美学上令人不快，主要是因为 [我的应用程序中其他 table 的 =43=] 强制用户单击辅助 link。

碰巧，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 属性。

通过此更改，我可以恢复到 "plain Jane" 调用 DataTables，而不必完全依赖 columnDefs：

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

现在我得到一个 table，它通过单击列 header 正确地按日期按升序和降序排序，以及直接 link 到 object 与日期关联。

Answer 3

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

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

Here we disable the ordering feature of DataTables by default, you can even disable searching by setting 'searching' to false

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

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

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

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

JQuery DataTables: Unable to sort column after adding columnDefs

javascript

datatable

jquery

ruby-on-rails

coffeescript