JavaScript sort date without plugin

Question

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;
};

How can I make this happen? I am really new to JavaScript and still learning every day. The date format is mm-dd-yyyy as per my example.

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 JS Fiddle but I can't get that to do anything at all. It worries me that I am missing something that I am not aware of.

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 100s of returned records.

Store the actual date objects and sort those, instead of sorting the strings. Only convert the date objects to strings when they need to be displayed. — forgivenson
– forgivenson, Commented Mar 23, 2016 at 19:17

Daniel Almeida · Accepted Answer · 2016-03-26 18:16:02Z

1

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

edited Mar 26, 2016 at 18:16

answered Mar 23, 2016 at 19:52

Daniel Almeida

4004 silver badges8 bronze badges

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

7 Comments

Craig Howell Over a year ago

This is doing exactly what I want but I can't figure out how to incorporate this into my code above. I want to be able to sort both by the text columns and the date columns. Any idea on how I can combine the two to get the desired effect? I am new so I am guessing I am looking over something really simple...

Daniel Almeida Over a year ago

send the type as parameter.. should work fine.. (id, column, order, type) and check before converting to date.. var dtA = (type == "date") ? new Date(a.cells[column].innerHTML) : a.cells[column].innerHTML;

Craig Howell Over a year ago

I added that piece of code but that seemed to go back to sorting the dates as a number instead of a date. Here is the jsfiddle: link. It works on the letter column perfectly but not the date...

Daniel Almeida Over a year ago

I think you forgot to fork.. check this solution

Daniel Almeida Over a year ago

@Craig Howell I've made some changes to work with text and date properly.. check this out

|

Nigel Nelson · Accepted Answer · 2016-03-23 19:28:22Z

1

Use Javascript's built in Date object. An array of dates object can easily be sorted, like so:

var array = [
  new Date("01/02/2016"),
  new Date("02/01/2016"),
  new Date("12/12/2014"),
  new Date("12/14/2015")
];
array.sort();

answered Mar 23, 2016 at 19:28

Nigel Nelson

1201 silver badge9 bronze badges

2 Comments

Aral Roca Over a year ago

I think is the cleaner solution!

Craig Howell Over a year ago

It may be but the array is comprised of more than just dates. There are text columns and varchar columns as well.

Veniamin · Accepted Answer · 2016-03-23 19:38:06Z

0

You can get time from date object for each item

var arr = [];

arr[i]= new Date(item_date_string).getTime();

You can sort array of integer values, then fill array of equalent dates strings

answered Mar 23, 2016 at 19:38

Veniamin

4673 silver badges9 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:16:37Z

0

If you want to use jquery plugin for sorting dates you can refer to this answer also sort date in html table using jquery

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Mar 23, 2016 at 19:38

P Sharma

1949 bronze badges

Collectives™ on Stack Overflow

JavaScript sort date without plugin

Update

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related