I'm using jQuery DataTables and I have a problem when I'm sorting my time column with this format mm:ss. For example when I sort this 00:08 the sort does something but this is not good. I have in my column:

00:08
00:15
00:01
01:20
00:16
02:11

So the sort doesn't work. Do you know how can I sort my time column?

Here is my code :

$('#table').DataTable({
    dom: "t<'col-sm-5'i><'col-sm-7'p>",
    autoWidth: false,
    serverSide: true,
    aaSorting: [[0, 'desc']],
    rowId: 'id',
    lengthChange: false,
    ajax: {
        url: 'index',
        method: 'POST'
    }
    columns: [
        {data: "id", width: '5%'},
        {data: "name", width: '10%', orderData: [ 1, 0 ]},
        {data: "user_name", width: '10%', orderData: [ 2, 0 ]},
        {data: "email", width: '35%', orderData: [ 3, 0 ]},
        {data: "duration", render: duration_time, width: '10%', type: "time",orderData: [ 4, 0 ]},
        {data: "inplete", render: inplete, width: '30%', orderData: [ 5, 0 ]}
    ]
});

Here is the function for the render parameter :

function duration_time(data, type, dataToSet){
    var start =  dataToSet.date_start;
    var end =  dataToSet.date_end;
    var time = moment.utc(moment(end, "YYYY-MM-DD HH:mm:ss").diff(moment(start, "YYYY-MM-DD HH:mm:ss"))).format("mm:ss");

    return time;
}

function inplete(data, type, dataToSet){
    return dataToSet.inplete == 0 ? 'Complete' : 'Inplete';
}

I'm using jQuery DataTables and I have a problem when I'm sorting my time column with this format mm:ss. For example when I sort this 00:08 the sort does something but this is not good. I have in my column:

00:08
00:15
00:01
01:20
00:16
02:11

So the sort doesn't work. Do you know how can I sort my time column?

Here is my code :

$('#table').DataTable({
    dom: "t<'col-sm-5'i><'col-sm-7'p>",
    autoWidth: false,
    serverSide: true,
    aaSorting: [[0, 'desc']],
    rowId: 'id',
    lengthChange: false,
    ajax: {
        url: 'index',
        method: 'POST'
    }
    columns: [
        {data: "id", width: '5%'},
        {data: "name", width: '10%', orderData: [ 1, 0 ]},
        {data: "user_name", width: '10%', orderData: [ 2, 0 ]},
        {data: "email", width: '35%', orderData: [ 3, 0 ]},
        {data: "duration", render: duration_time, width: '10%', type: "time",orderData: [ 4, 0 ]},
        {data: "inplete", render: inplete, width: '30%', orderData: [ 5, 0 ]}
    ]
});

Here is the function for the render parameter :

function duration_time(data, type, dataToSet){
    var start =  dataToSet.date_start;
    var end =  dataToSet.date_end;
    var time = moment.utc(moment(end, "YYYY-MM-DD HH:mm:ss").diff(moment(start, "YYYY-MM-DD HH:mm:ss"))).format("mm:ss");

    return time;
}

function inplete(data, type, dataToSet){
    return dataToSet.inplete == 0 ? 'Complete' : 'Inplete';
}

• javascript
• jquery
• sorting
• datatables

Share Improve this question Follow edited Jun 2, 2016 at 11:29 John asked Jun 2, 2016 at 10:12 JohnJohn 5,0011010 gold badges5353 silver badges107107 bronze badges 2

• Could you show the code that is performing the sort? – Jay Welsh Commented Jun 2, 2016 at 10:15
• Would you create a fiddle of your use please – Parag Bhayani Commented Jun 2, 2016 at 10:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You have to use Sorting plug-ins.

It allows you to sort the columns based on type and not only on data.

Your code will be like this:

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.numericComma.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example').dataTable( {
            "columnDefs": [
                { "type": "time", targets: 3 }
            ]
        } );
    } );
</script>

I had the same issue today and found the solution. Here is the code.

 <script type="text/javascript" src="//cdn.datatables/1.10.19/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="//cdn.datatables/plug-ins/1.10.19/sorting/time.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#example').dataTable( {
                columnDefs: [
                         { type: 'time-uni', targets: 7 }
                    ]
            } );
        } );
    </script>

You can also check other sorting plugins here: https://cdn.datatables/plug-ins/1.10.19/sorting/