Geek asks and answers

How to sort by time (format: 5:40 PM) in javascript for use with DataTables?

I have a datatable that I use that has 5 columns ( http://datatables.net/ )

Columns

  • Date in the format: Jan. 5
  • Time in format: 10:31 (xx: xx XX)
  • Columns 3, 4, 5 are not important, it's just data that I don't care about sorting if 1 and 2 are correct.

I want to sort by date FIRST (last), then I want to sort by time (most recent at the top).

So, on January 5, 16:58 should show until 4:58 in the morning, and, obviously, all other numbers should work just as well for all other times. The format is always the same, i.e.: 12:34, 16:15, 12:00, etc.

Today it already works great. There are only 2 days of max data in a datatable, so even when it flips before the 1st of the month, it will still be displayed at the top, which is good. I looked through the documentation and I'm confused how to do the correct sorting for my Time column.

Here is my code:

oTable = $('#posts').dataTable({
    "bSort": true,
    "aaSorting": [ [0,'desc'], [1,'asc'] ],
    "aoColumns": [
                null,
                { "sType": 'time-sort' },
                null,
                null,
                null
           ]

});

This is from here: http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html

, - , sType "aoColumns" ( , ), , :( , . , , , ...

, , , . ( , ). 99% , , .

/* Define two custom functions (asc and desc) for time sorting */
jQuery.fn.dataTableExt.oSort['time-sort-asc']  = function(x,y) {
    return ???;
};

jQuery.fn.dataTableExt.oSort['time-sort-desc'] = function(x,y) {
    return ???
};
+1
3

; , .

function getTimeValue(x) {
  // if the cell is not empty then parse it, otherwise just return 0 as the value; so it will be sorted appropriately.      
  if (x != '') {
    var time = x.match(/(\d+)(?::(\d\d))?\s*(P?)/);  
    var h = parseInt(time[1]) + (time[3] ? 12 : 0);
    if(!time[3] && parseInt(time[1])==12) h = 0;
    if(time[3] && parseInt(time[1])==12) h = 12;

    return h * 60 + ( parseInt(time[2]) || 0 );
  } else {
    return 0;
  }
}
0

,

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "time-sort-pre": function(a) {
        if (a == '')
            return null;

        var time = a.match(/(\d+)(:(\d\d))?\s*(p?)/i);
        if (time == null)
            return null;

        var hours = parseInt(time[1], 10);
        if (hours == 12 && !time[4]) {
            hours = 0;
        }
        else {
            hours += (hours < 12 && time[4]) ? 12 : 0;
        }

        var d = new Date();
        d.setHours(hours);
        d.setMinutes(parseInt(time[3], 10) || 0);
        d.setSeconds(0, 0);
        return d;
    },
    "time-sort-asc": function(a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "time-sort-desc": function(a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

using a piece of code from this answer What is the best way to parse time on a Date object from user input in Javascript? and tested using dataTables 1.9. 4, this code needs to be called after dataTables.js as a plugin, then just need to set de sTypeto the column {sType: "time-sort"}. Example:

$('#datatable-list').dataTable(
    aoColumns: [{sType: "time-sort"}]
);

Assuming your table has only one column with time values

0
source

More articles:


All Articles