javascript - JQuery 数据表 : Unable to sort column after adding columnDefs

Question

我的 Rails 应用程序中有一个表，其中显示单列日期，以美国长格式编写(月 DD、YYYY)。

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

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

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

更改脚本后，数据表现在按升序显示日期。但是，单击列标题绝对不会执行任何操作 - 日期不按降序排序。

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

Answer 1

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

我尝试了不同的types对于我的columnDefs ，但他们都无法正确解释一列链接。我突然想到，我可以取消链接日期字符串并使用 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 %>

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

通过此更改，我可以恢复为 DataTables 的“简单简”调用，而不必依赖 columnDefs完全:

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

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