Sorting long duration with jquery datatables

Question

I already looked for answers to my question, for example Datatables sorting time column or Custom sort durations using jQuery DataTables but I have not been able to find one which suits my problem. Therefore, here I am.

I am using the jquery Datables : https://datatables.net/ to display tables in my current project. I got tables with columns containing durations such as :

When I want to sort them out, the result is not correct :

99:39:25
33:10:39
322:48:43
274:01:21

I looked in the documentation for the sorting plug-ins (https://datatables.net/plug-ins/sorting/) but it did not help. I used the natural and time sorting and each time got the result above. Does anyone got an idea on how to proceed ?

This is what I am using to initialize the datatable in my HTML:

<script>
$(document).ready(function() {
 $('.dataresults').DataTable({
   "iDisplayLength": 25,
   "searching": true,
   "pagingType": "simple",
   "order": [[7, "desc"]],
   "columnDefs": [{
     "type": 'time', "targets": [6,7]
   }],
 });
});
</script>

Dr Mouse Dr Mouse · Accepted Answer · 2016-10-27T13:18:23

I found the solution based on Custom sort durations using jQuery DataTables. I post the solution, if anyone would be in my case.

I replaced this regex:

/(?:(\d+)m)?\s*(?:(\d+)s)?/

by this one:

/(?:(\d+):)?(?:(\d+):)?(?:(\d+):)?/

and it is sorting as expected !

322:48:43
274:01:21
99:39:25
33:10:39

The full script becomes :

<script type="text/javascript">
$.extend(jQuery.fn.dataTableExt.oSort, {
"duration-pre": function (s) {        
    var duration;      
    s = s.toLowerCase();
    if(s === 'n/a'){ 
        duration = -1;           
    } else {            
        d = s.match(/(?:(\d+):)?(?:(\d+):)?(?:(\d+):)?/);
        duration = parseInt(d[1] ? d[1] : 0) * 60 + parseInt(d[2] ? d[2] : 0) + parseInt(d[2] ? d[2] : 0) / 60;
    }
    return duration;
}
});

$(document).ready(function() {
$('.dataresults').DataTable({
  "iDisplayLength": 25,
  "searching": true,
  "pagingType": "simple",
  "order": [[7, "desc"]],
  "columnDefs": [{
    "type": 'duration', targets: [6,7]
  }],
});
});
</script>

Sorting long duration with jquery datatables

1 Answers