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

Question

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

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

我试图通过修改CoffeeScript以包括columnDefs，从而使datatable按日期正确排序，如下所示：

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

更改脚本后，datatable现在按升序显示日期。然而，单击列标题绝对什么也不做--日期不按降序排序。

如何在保留按asc/desc顺序排序的能力的同时，通过单击列标头来获得数据以识别列值为日期？我使用的是JQuery 1.11.2，我希望坚持使用尽可能少依赖的解决方案，因此使用像moment.js这样的库是最后的选择。谢谢你的帮助。

Answer 1

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

我为我的columnDefs尝试了不同的columnDefs，但是没有一个能正确地解释一列链接。我突然意识到，我可以取消日期字符串的链接，并创建第二列，并使用链接到日期所引用的对象的link_to。虽然这种方法在技术上满足了在提供对底层对象的访问时日期都是可排序的要求，但在第二列中拥有一系列链接在美观上是令人不快的，主要是因为我的应用程序中的其他任何一个表都没有强迫用户单击另一个链接。

碰巧的是，DataTables 1.10+可以利用HTML5数据属性提供一段数据用于排序，同时在<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()

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

Answer 2

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

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

这里我们默认禁用DataTables的排序功能，甚至可以通过将“搜索”设置为false来禁用搜索。

选项2如果在选项1中发现禁用了列排序，则将排序: false行替换为"aaSorting"：[]，使其变为：

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

有关选项2的更多信息，请参见下面的doc https://legacy.datatables.net/ref#aaSorting

Answer 3

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

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