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

Question

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 :(

Of course its possible but why do you have to do that without jquery or any other javascript plugin. It will require a lot load of code. You can do that with just 1 line of code with jquery sortable. — Efe Özazar
– Efe Özazar, Commented Aug 11, 2016 at 7:05
@EfeÖzazar you know that magical word - clients... haha it is a request... They like to see us suffering I guess... I know it's super easy with jQuery for example, just few lines... but I have no choice... — nemo_87
– nemo_87, Commented Aug 11, 2016 at 7:10
Should the data be in a tbody element? (It would simplify the sort if the header row didn't belong to the same parent...) — nnnnnn
– nnnnnn, Commented Aug 11, 2016 at 7:18
@nemo_87 they hate us and we hate them :D then start writing if you stuck anywhere update your question with your code. I will keep track of it. I dknt have time to write it all but i will help if i can. — Efe Özazar
– Efe Özazar, Commented Aug 11, 2016 at 7:21
@nnnnnn well we can change it to tbody, if it will simplify it... I am still bad with plain javaScript, so I don't know what can I do with tbody, but I will research a bit. Thanks for idea :) — nemo_87
– nemo_87, Commented Aug 11, 2016 at 7:21

nnnnnn · Accepted Answer · 2016-08-11 07:33:43Z

19

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>

edited Aug 11, 2016 at 7:33

answered Aug 11, 2016 at 7:27

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

6 Comments

nemo_87 Over a year ago

nice solution! :) It's not working for me, because I have one more button on the page, so I guess it doesn't pick the right one, but I can change last line and it should be ok :) Thank you for this! :) @nnnnnn

nnnnnn Over a year ago

Well sure, the button wasn't really part of the solution, it was part of the demo. Having the table ID hardcoded within the sort function isn't really ideal either, but it was just a quick way to get it up and running so that I could get the sort concept across. You can tidy it up in your real project, and make the sort direction a parameter of the function, etc.

nemo_87 Over a year ago

yes I agree, later I can just change it, but the most important is that has correct functionality :D thanks :D @nnnnnn

Nguai al Over a year ago

I don't see how this statement 'tbody.appendChild(v);' removes all elements and starts from scratch.

nnnnnn Over a year ago

@Nguaial - It doesn't remove elements, it moves them. Note that that statement is inside a loop, so it moves all rows, one at a time.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related