Question

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

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

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

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

更改脚本后，数据表现在按升序显示日期。但是，单击列标题绝对没有任何内容 - 日期不按降序排序。

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

Answer 1

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

的对象

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

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 %>

请注意data-order代码中的<td>属性。

通过这种改变，我可以恢复到一个简单的简＆＃34;调用DataTables，而不必完全依赖columnDefs：

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

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

Answer 3

选项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

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

3 个答案: