Craig Howell Craig Howell - 1 month ago 18
HTML Question

Javascript sort date without plugin

I have a piece of code I use to sort columns in an HTML table and it works perfectly....except for date fields. Alphabet and pure numeric it works great! but when used on a date column the sorter does not work as I want it to. Currently dates get sorted like so:


01-02-2016

02-01-2016

12-12-2014

12-14-2015


What I want to have happen is:


12-12-2014

12-14-2015

01-02-2016

02-01-2016


Here is the Javascript that I use to make this sort work currently:

var tb, asc1 = 1,
asc2 = 1,
asc3 = 1,
asc4 = 1,
asc5 = 1,
asc6 = 1;

function sort_table(tbody, col, asc) {
var rows = tbody.rows,
rlen = rows.length,
arr = new Array(),
i, j, cells, clen;
// fill the array with values from the table
for (i = 0; i < rlen; i++) {
cells = rows[i].cells;
clen = cells.length;
arr[i] = new Array();
for (j = 0; j < clen; j++) {
arr[i][j] = cells[j].innerHTML;
}
}
// sort the array by the specified column number (col) and order (asc)
arr.sort(function (a, b) {
return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 * asc);
});
// replace existing rows with new rows created from the sorted array
for (i = 0; i < rlen; i++) {
rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>";
}
}


The onclick function is this:

function test() {
sort_table(tb, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; asc4 = 1; asc5 = 1; asc6 = 1;
};


Does anyone have any suggestions on how I can make this happen! I am really new to Javascript and still learning everyday! The date format is mm-dd-yyyy if you were unable to tell from my example. Any help would be greatly appreciated!

UPDATE

I have adopted Daniel Almeida code as he has it working in an example exactly as I want it to but I cannot incorporate it within my own code. When I do the sort seems to be erratic and all over the place. I am now working with the following code:

var sorter = function(id, column, order, isDate) {
var t = document.getElementById(id);
var rows = Array.prototype.slice.call(t.rows, 0);

rows = rows.sort(function(a, b) {

var dtA = (isDate) ? new Date(a.cells[column].innerHTML) : a.cells[column].innerHTML;
var dtB = (isDate) ? new Date(b.cells[column].innerHTML) : b.cells[column].innerHTML;

return (order == 0) ? dtA > dtB : dtA < dtB;

});

for (i = 0; i < rows.length; i++) {
t.appendChild(rows[i]);
}

}


I have also created a jsfiddle but I can't get the jsfiddle to do anything at all. Worries me that I am missing something that I am not aware of. Here is the jsfiddle.

The reason for splitting the two tables is the bottom table is dynamically loaded and the container div allows for a scroll window instead of a long list of information when there are 100's of returned records.

Answer

First example: sort table

var sorter = function(td, id, column, isDate) {

    var tbl = document.getElementById(id);
    var rows = Array.prototype.slice.call(tbl.rows, 0);

    var order = td.getAttribute("order") == "asc" ? "desc" : "asc";
    td.setAttribute("order", order);

    rows = rows.sort(function(a, b) {

      var valA = a.cells[column].innerText;
      var valB = b.cells[column].innerText;

      var compA = (isDate) ? new Date(valA) : valA;
      var compB = (isDate) ? new Date(valB) : valB;

      if (order == "asc") {
        if (compA < compB) return -1;
        if (compA > compB) return 1;
      }

      if (order == "desc") {
        if (compA > compB) return -1;
        if (compA < compB) return 1;
      }

      return 0;

    });

    for (i = 0; i < rows.length; i++) {
      tbl.appendChild(rows[i]);
    }

  }

EDIT: check this fiddle working with date and text, asc and desc

Comments