Question

50

Sort table in HTML by column with date values desc using only javaScript

rated 0 times [ 57] [ 7] / answers: 1 / hits: 36583 / 8 Years ago, thu, august 11, 2016, 12:00:00

Is it possible to make sorting function using only javaScript, without any other library for sorting?

Let's say I have one table, and it's first column that has date values in this format: MM/dd/yyyy. Table has two more columns, like this:

<table id=results width=360 border=1>

    <thead>

      <tr>

        <th scope=col width=120>Date Created</th>

        <th scope=col width=120>Name</th>

        <th scope=col width=120>Tests</th>

      </tr>

      <tr>

        <td>07/08/2015</td>

        <td>Test Name</td>

        <td>Raven</td>

      </tr>

      <tr>

        <td>05/04/2015</td>

        <td>Test Name 4</td>

        <td>Raven 3</td>

      </tr>

      <tr/>

        <td>01/08/2017</td>

        <td>Test Name 2</td>

        <td>PCT</td>

      </tr>

    </thead>

</table>

Would it be possible to lets say add one button, and on click event sort rows by values in Date column?

I have to accomplish this using only plain javaScript and HTML, so no jQuery unfortunately :(

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

darennevina

Add To Favorites

Follow

Total Points: 422

Total Questions: 128

Total Answers: 105

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

answered 8 Years ago scarlett · Accepted Answer

Here's a little something I whipped up to give you some ideas. Obviously you could extend this to sort by other data types.

I've cheated on the date comparisons by just changing the string format date directly to an eight-digit number in the form 20140312 from 12/03/2014 - note that I've assumed the date input format is dd/mm/yyyy, so if for some reason you're actually using mm/dd/yyyy you'll have to tweak the convertDate() function.

Also I've introduced a <tbody> into your table so that I can just sort the data rows and completely ignore the header row.

function convertDate(d) {

  var p = d.split(/);

  return +(p[2]+p[1]+p[0]);

}



function sortByDate() {

  var tbody = document.querySelector(#results tbody);

  // get trs as array for ease of use

  var rows = [].slice.call(tbody.querySelectorAll(tr));

  

  rows.sort(function(a,b) {

    return convertDate(a.cells[0].innerHTML) - convertDate(b.cells[0].innerHTML);

  });

  

  rows.forEach(function(v) {

    tbody.appendChild(v); // note that .appendChild() *moves* elements

  });

}



document.querySelector(button).addEventListener(click, sortByDate);

<table id=results width=360 border=1>

    <thead>

      <tr>

        <th scope=col width=120>Date Created</th>

        <th scope=col width=120>Name</th>

        <th scope=col width=120>Tests</th>

      </tr>

    </thead>

    <tbody>

       <tr>

        <td>04/04/2015</td>

        <td>Test Name 2</td>

        <td>1</td>

      </tr>

      <tr>

        <td>09/08/2017</td>

        <td>Test Name 5</td>

        <td>2</td>

      </tr>

      <tr>

        <td>07/08/2015</td>

        <td>Test Name 4</td>

        <td>3</td>

      </tr>

      <tr>

        <td>05/04/2015</td>

        <td>Test Name 3</td>

        <td>4</td>

      </tr>

      <tr>

        <td>12/08/2017</td>

        <td>Test Name 6</td>

        <td>5</td>

      </tr>

      <tr>

        <td>21/03/2014</td>

        <td>Test Name 1</td>

        <td>6</td>

      </tr>

    </tbody>

</table>

<button>Sort by date</button>