Datatables sorting time column

Question

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:

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: "incomplete", render: incomplete, 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 incomplete(data, type, dataToSet){
    return dataToSet.incomplete == 0 ? 'Complete' : 'Incomplete';
}

Could you show the code that is performing the sort?

Jay Welsh
– Jay Welsh

2016-06-02 10:15:47 +00:00
Commented Jun 2, 2016 at 10:15 — Jay Welsh
– Jay Welsh, Commented Jun 2, 2016 at 10:15
Would you create a fiddle of your use please

Parag Bhayani
– Parag Bhayani

2016-06-02 10:15:48 +00:00
Commented Jun 2, 2016 at 10:15 — Parag Bhayani
– Parag Bhayani, Commented Jun 2, 2016 at 10:15

Ygalbel · Accepted Answer · 2016-06-02 10:17:19Z

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>

answered Jun 2, 2016 at 10:17

Ygalbel

5,5491 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Over a year ago

Thanks for your answer but there is no changes for me

John Over a year ago

I'm server side so this will be hard to build my fiddle, I'll update my question to show you my code.

John Over a year ago

I think that there is a problem because I don't have the duration data server side. I only have the start datetime and the end datetime. The duration is calculate in the render function. That is why the query to the database can't returns me the sort on the duration time. Do you have an idea ?

Ygalbel Over a year ago

Did you try to add the plugin and set 5th column to time?

Jonas T · Accepted Answer · 2019-01-02 05:07:00Z

0

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

 <script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="//cdn.datatables.net/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.net/plug-ins/1.10.19/sorting/

answered Jan 2, 2019 at 5:07

Jonas T

3,0954 gold badges35 silver badges45 bronze badges

Collectives™ on Stack Overflow

Datatables sorting time column

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related