Sort HTML table with date range column using Javascript

Question

like if a column contains dates 9/17/2018 - 9/21/22018 in the first row and 9/30/2018 - 10/12/2018 in second row etc, need help with Sorting such columns from the earliest date range. My table right now:

<table border="1" cellpadding="1" cellspacing="0" class="sortable" 
id="myTable2" style="width:100%;border:1px solid #000000;">
<thead>

<th style="text-align: center;" width="200"><b>Pay Week</b></th>
<th style="text-align: center;" width="200"><b>Date of Intermittent Leave 
Event</b> </th>
<th style="text-align: center;" width="400"><b>Pay Instruction</b></th>

</thead>
<tbody>
<tr>
  <td style="text-align: center;" width="200">8/5/2018 - 8/11/2018</td>
  <td style="text-align: center;" width="200">8/8/2018</td>
  <td style="text-align: center;" width="400">3.0 hour(s) unpaid/ PTO 
(FMLA)</td>
</tr>
<tr>
  <td style="text-align: center;" width="200">8/12/2018 - 8/18/2018</td>
  <td style="text-align: center;" width="200">8/18/2018</td>
  <td style="text-align: center;" width="400">4.0 hour(s) unpaid/ PTO 
(FMLA)</td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/9/2018 - 9/15/2018</td>
  <td style="text-align: center;" width="200">9/12/2018</td>
  <td style="text-align: center;" width="400">7.0 hour(s) unpaid/ PTO 
(FMLA)</td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/9/2018 - 9/15/2018</td>
  <td style="text-align: center;" width="200">9/13/2018</td>
  <td style="text-align: center;" width="400">7.0 hour(s) unpaid/ PTO 
(FMLA)</td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/9/2018 - 9/15/2018</td>
  <td style="text-align: center;" width="200">9/14/2018</td>
  <td style="text-align: center;" width="400">7.0 hour(s) unpaid/ PTO 
(FMLA)</td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/3/2017 - 9/9/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/10/2017 - 9/16/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/17/2017 - 9/23/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">9/24/2017 - 9/30/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">10/1/2017 - 10/7/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">10/8/2017 - 10/14/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
<tr>
  <td style="text-align: center;" width="200">10/15/2017 - 10/21/2017</td>
  <td style="text-align: center;" width="200">N/A - Continuous</td>
  <td contenteditable="true" style="text-align: center;" width="400"></td>
</tr>
</tbody>
</table>
<button>Sort Pay Week</button>

<script>
  function convertDate(d) {
    var str = d.split("-", 1);
    var p = str.split("/");
    return +(p[2] + p[0] + p[1]);
  }

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

</script>

After the first column is sorted, the second column's values are jumbled, how to sort just the rows that contain a date and not NA-Continuous cells?

What libraries/frameworks are you using to make the table sortable? I see you have class="sortable" in your HTML, but HTML itself doesn't implement sortable tables. — Jacob
– Jacob, Commented Sep 17, 2018 at 17:05
Are you using static html or these rows dynamically added through javascript? — Aagam Jain
– Aagam Jain, Commented Sep 17, 2018 at 17:05
@AagamJain Rows get added dynamically using apex:repeat tag of Salesforce's visualforce. This is the rendered output on browser, but javascript works with HTML table element in visualforce — duppu
– duppu, Commented Sep 17, 2018 at 19:00
@jacob that class Sortable is something I experimented from google search, not working exactly. — duppu
– duppu, Commented Sep 17, 2018 at 19:02

halfer · Accepted Answer · 2019-11-30 14:50:47Z

1

I made it for you:

function convertDate(d) {
    var str = d.split("-", 1)[0].trim();
    var p = str.split("/");
    return new Date(p[2] + "-"+p[0]+"-" + p[1]);
  }

  function sortByDate() {
    var tbody = document.querySelector("#myTable2 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);

Codepen: https://codepen.io/agamj474/pen/KxGEXV.

edited Nov 30, 2019 at 14:50

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Sep 18, 2018 at 5:42

Aagam Jain

1,5561 gold badge10 silver badges20 bronze badges

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

4 Comments

duppu Over a year ago

only works with first and last rows, the rest of the rows in between are not sorted, I did check that in your codepen too

Aagam Jain Over a year ago

@duppu sorry for delay in response. I have edited the answer and link as well. Please check and let me know if any concern.

duppu Over a year ago

awesome, it works! Thank you @Aagam Jain! I did vote up the answer but it is not recorded as I have reputation less than 15, coz I am a newbie.

Aagam Jain Over a year ago

No worries bro :)

Collectives™ on Stack Overflow

Sort HTML table with date range column using Javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related