Date format and sorting: How do I sort my time outputs with DataTables?

hAtul89

When inserting a time string, for example: "96:43" [h:m]
and sort the column I get something like this:

which doesn't make any sense - seems like it's sorting by first number and not by "time".

How do I sort my time outputs with datatables?

colin

Hi @hAtul89 ,

Use the DataTime plugin for this.

Cheers,

Colin

hAtul89

@colin
I might have not been so clear. I am not using any dates. just minutes and seconds (as a counter)

        // Turn time (minutes) to time (hour:min)
        secondsToTime: function(seconds) {
            var hours   = Math.floor(seconds / 3600);
            var minutes = Math.floor((seconds % 3600) / 60); 
            var seconds = Math.floor(seconds % 60);
            return (hours < 10 ? "0" + hours : hours) + ":" + 
                     (minutes < 10 ? "0" + minutes : minutes)/* + ":" + 
                     (seconds < 10 ? "0" + seconds : seconds)*/;
        },

^
What i have displayed is the string output of this function. just taking a number by minutes and turning it to hh:mm as in my screenshot.

kthorngren

You may want to consider using columns.render and orthogonal data. You could use your seconds value for the data of the column then in columns.render use the above function for the display and 'filter` types.

Or you can look through the other sorting plugins and maybe adapt one of them for your solution. Maybe the time plugin can be adapted.

Kevin

hAtul89

@colin I tried to understand the blog post you shared and i just don't get how it should work with my code.. this is how it looks like on my end:

this.$List = this.$List.DataTable({
    data:       that.sanitizedList,
    columns:    [
                    {
                        title: 'item',
                        data: 'item_info.item_name',
                        className: 'itemname',
                        searchable: true
                    }, 
                    {
                        title: 'Total I Time', 
                        data: 'item_info.i', 
                        createdCell:    function (row, data, dataIndex) {
                            $(row).attr('data-order', data);
                        },
                        render: function(data) {
                            return cData.secondsToTime(data);
                        }
                    },
                    {
                        title: 'Total F Time', 
                        data: 'item_info.f', 
                        render: function(data) {
                            return cData.secondsToTime(data);
                        }
                    },
                    {
                        title: 'Total users', 
                        data: 'item_info.total_users'
                    },
                    {   
                        type: 'html-input', 
                        targets: [0, 1],
                        regex: true,
                        orderDataType: 'dom-select',
                        searchable: true,
                        className: 'seto', 
                        title: 'Set to',
                        data: 'item_info.list',
                        width: '100px',
                        render: function(data) {
                            
                            var select = '<select class="form-control form-control-sm">';

                            for (var i=0; i<4; i++) {
                                if ( data === null ) data = 'List';
                                if (data.toUpperCase() === that.listTypes[i].toUpperCase()) 
                                    select += '<option value="' + that.listTypes[i].toLowerCase() + '" selected="true">' + that.listTypes[i] + '</option>';
                                else 
                                    select += '<option value="' + that.listTypes[i].toLowerCase() + '">' + that.listTypes[i] + '</option>';
                            }

                            select += '</select>';

                            return select;
                        }
                    }
    ],
    responsive: true,
    language: {
        search: '',
        searchPlaceholder: 'Search item'
    },
    processing:    true,
    autoWidth:     false, 
    sFilterInput:  'item_list_search',
    sLengthSelect: 'item_list_length', 
    createdRow:    function (row, data, dataIndex) {
                        if ( data.item_info.list === null ) data.item_info.list = 'item';
                        $(row).attr('data-id', data.item_info.item_id);
                        $(row).attr('data-type', data.item_info.list);
                    }

});

colin

Hi @hAtul89 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin