JQuery DataTables: Unable to sort column after adding columnDefs

Question

I have a table in my Rails application which displays a single column of dates, written in US long form (Month DD, YYYY).

Using a default dataTable, I noticed that these date strings are sorted alphabetically, rather than by date. Clicking the column header will sort those strings in ascending or descending order as expected, but alphabetically.

I tried to get the datatable to properly sort by date by modifying my CoffeeScript to include columnDefs, as follows:

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

After altering the script, the datatable now displays the dates in ascending order. Clicking on the column header, however, does absolutely nothing -- dates are not sorted in descending order.

How can I get datatables to recognize the column values as dates while retaining the ability to sort in asc/desc order by clicking on the column header? I'm using JQuery 1.11.2, and I'd like to stick with a solution with as few dependencies as possible, so using libraries like moment.js are a last resort. Thanks for any assistance.

Answer 1

DataTables couldn't sort my column because the dates in the column were actually links created via the Rails link_to helper, rather than simple strings.

I tried different types for my columnDefs, but none of them could interpret a column of links properly. It occurred to me that I could de-link the date string and creat a second column with a link_to that linked to the object to which the date referred. While this approach technically met the requirement that dates be both sortable while providing access to the underlying object, having a series of links in a second column was aesthetically displeasing, mainly because none of the other tables in my application force the user to click a secondary link.

As it happens, DataTables 1.10+ can leverage HTML 5 data attributes to provide a piece of data to be used in sorting while displaying a different piece of data between the <td> tags.

Old Code:

<% @schedulable_activities.each do | activity | %>
  <tr>
    <td>
      <%= link_to "#{localize_date(activity.start_date)}", activity_path(activity) %>
    </td>
  </tr>
<% end %>

New Code:

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

Note the data-order attribute in the <td> tag.

With this change, I could revert to a "plain Jane" invocation of DataTables, without having to rely on columnDefs at all:

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

Now I get a table that properly sorts by date in both ascending and descending order by clicking on the column header, as well as a direct link to the object associated with the date.

Answer 2

Option 1: If you look at the https://www.datatables.net/manual/options, there is an option for setting order to true or false, simply set order to 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

Option 2 if you find that columns sorting is disabled in option one, then replace the ordering: false line with "aaSorting": [] so it becomes:

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

for more on option 2 follow this doc https://legacy.datatables.net/ref#aaSorting

Answer 3

Not sure about coffee syntax but in javascript that syntax is invalid. Missing {} to define the object that columnDefs is a property of

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