Ordering datetime asc/desc

Question

I have a table of dates

<table>
    <tr>
      <th>Date</th>
    </tr>
    <tr>
      <td>01/03/2018 02:31 AM</td>
    </tr>
    <tr>
      <td>01/13/2018 03:00 AM</td>
    </tr>
    <tr>
       <td>09/02/2017 02:31 AM</td>
    </tr>
    <tr>
       <td>11/29/2017 09:30 PM</td>
    </tr>
    <tr>
      <td>03/01/2018 03:00 AM</td>
    </tr>
</table>

that I want to order chronologically. I found another thread that recommended using:

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() }

but output doesn't order newest to oldest correctly.

I get this:

Date
01/03/2018 02:31 AM
01/13/2018 03:00 AM
03/01/2018 03:00 AM
09/02/2017 02:31 AM
11/29/2017 09:30 PM

when it should start with the newest date first. And advice on how I can get these sorted correctly?

you need to define your own comparer to compare two date string. check this [compare two date string](https://stackoverflow.com/questions/14781153/how-to-compare-two-string-dates-in-javascript) — Sphinx, Apr 18 '18 at 19:11

Rüzgar · Answer 1 · 2018-04-18T20:11:20.877

The problem here is that the cell values have to be parsed into date format. And later on you need to reformat it to Locale String toLocaleString so that you can use localeCompare function.

First change:

var valA = getCellValue(a, index), valB = getCellValue(b, index)

to:

var valA = Date.parse(getCellValue(a, index)).toLocaleString(), valB = Date.parse(getCellValue(b, index)).toLocaleString();

And here is the working version:

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))

    this.asc = !this.asc
    if (this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = Date.parse(getCellValue(a, index)).toLocaleString(), valB = Date.parse(getCellValue(b, index)).toLocaleString();
        //console.log(valA, valB, "____", valA.localeCompare(valB),"_____",valA>valB);
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
    }
}
function getCellValue(row, index){
    return $(row).children('td').eq(index).html();
}

th {
    cursor: pointer;
    background: lightgrey;
}
td, th {
    padding: 5px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
      <th>Date</th>
    </tr>
    <tr>
      <td>01/03/2018 02:31 AM</td>
    </tr>
    <tr>
      <td>01/13/2018 03:00 AM</td>
    </tr>
    <tr>
       <td>09/02/2017 02:31 AM</td>
    </tr>
    <tr>
       <td>11/29/2017 09:30 PM</td>
    </tr>
    <tr>
      <td>03/01/2018 03:00 AM</td>
    </tr>
</table>

Hope this works.

EDİT: For this to be sorted DESC, as you stated, you also need to change one more line:

Change this:

if (!this.asc){rows = rows.reverse()}

to this:

if (this.asc){rows = rows.reverse()}

Ordering datetime asc/desc

1 Answers1