JQuery数据表:添加columnDefs后无法对列进行排序

JQuery DataTables: Unable to sort column after adding columnDefs

本文关键字：排序 数据表 添加 columnDefs JQuery      更新时间：2023-09-26

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

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

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

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

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

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

datatable不能排序我的列，因为列中的日期实际上是通过Rails link_to helper创建的链接，而不是简单的字符串。

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

碰巧的是，DataTables 1.10+可以利用HTML 5数据属性来提供用于排序的数据，同时在<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属性。

通过这个更改，我可以恢复到对数据表的"普通简"调用，而完全不必依赖columnDefs:

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

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

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

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

在这里，我们禁用了数据表的排序特性默认情况下，您甚至可以通过将'searching'设置为false来禁用搜索

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

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

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

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

的属性的对象
$('.scheduled_activities').dataTable({
    columnDefs: [ { 'type': 'date', 'targets': 0 } ]
});
相关文章：