How to sort date column in jQuery DataTables by HTML5 'data-order' attribute?

Question

I use jQuery datatables plug-in and pass data through JSON array. In my table I have a Date column and that column has different date format like "Mon , 02 Sep 2019", so sorting doesn't work on this date column properly.

I have read about HTML5 data-sort attribute which is data table code they have mentioned in their documentation but I don't have any idea how to use this data-sort attribute with JSON array.

My code so far is:

$(document).ready(function() {
    $('#example').DataTable({
  "order":[],
  data : [['TEST','Develper','ABC','25','Mon , 05 Aug 2019','100000'],['TEST','Develper','ABC','25','Tue , 06 Aug 2019','100000'],['TEST','Develper','ABC','25','Mon , 02 Sep 2019','100000'],['TEST','Develper','ABC','25','Mon , 14 Oct 2019','100000'],['TEST','Develper','ABC','25','Mon , 04 Nov 2019','100000'],['TEST','Develper','ABC','25','Mon , 01 Nov 2020','100000']]
 });
} );

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" />
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script>

<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
    </table>

Here is js fiddle link "https://jsfiddle.net/deepak0145/31be0ygq/" — Devid, Aug 04 '19 at 07:11
You can use Datatables Orthogonal Data. See my answer on this post https://stackoverflow.com/questions/56023312/how-to-order-column-by-date-oldest-to-newest-with-datatable-plugin/57185107#57185107 — mike85, Aug 04 '19 at 07:49

score 1 · Accepted Answer · answered Aug 05 '19 at 10:14

I may mistake, but you may benefit from HTML5 attributes data-sort/data-order if you feed your DataTable using HTML source.

Considering, your source is array within JSON, I might suggest to make use of custom data type sorting:

First, you specify your custom date type (e.g. 'mydate') within column definition for your particular column :

$('table').DataTable({
    ...
    columnDefs: [{
            targets: 4,
            type: 'mydate'
    }]
});

Next, you specify custom sorting algorithm for that type:

Object.assign($.fn.DataTable.ext.oSort, {
  'mydate-asc': (a,b) => new Date(a) - new Date(b),
  'mydate-desc': (a,b) => new Date(b) - new Date(a)
});

So, your complete example might look as follows:

//your sample source data
const srcData = [{name:'TEST',position:'Develper',office:'ABC',age:25,startDate:'Mon , 05 Aug 2019',salary:100000},{name:'TEST',position:'Develper',office:'ABC',age:25,startDate:'Tue , 06 Aug 2019',salary:100000},{name:'TEST',position:'Develper',office:'ABC',age:25,startDate:'Mon , 02 Sep 2019',salary:100000},{name:'TEST',position:'Develper',office:'ABC',age:25,startDate:'Mon , 14 Oct 2019',salary:100000},{name:'TEST',position:'Develper',office:'ABC',age:25,startDate:'Mon , 04 Nov 2019',salary:100000},{name:'TEST',position:'Develper',office:'ABC',age:25,startDate:'Mon , 01 Nov 2020',salary:100000}];

//datatables init
$('table').DataTable({
  dom: 't',
  data: srcData,
  columns: ['name','position','office','age','startDate','salary'].map(header => ({data:header,title:header})),
  columnDefs: [{
    targets: 4,
    type: 'mydate'
  }]
});

//custom sorting
Object.assign($.fn.DataTable.ext.oSort, {
  'mydate-asc': (a,b) => new Date(a) - new Date(b),
  'mydate-desc': (a,b) => new Date(b) - new Date(a)
});

<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script></head><body><table></table></body></html>

How to sort date column in jQuery DataTables by HTML5 'data-order' attribute?

1 Answers1