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

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

• javascript
• sorting

• 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 Commented Aug 11, 2016 at 7:05
• 1 @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 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 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 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 Commented Aug 11, 2016 at 7:21

1 Answer 1

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>