Easy Tutorial
❮ Java Stringtokenizer Intro Es6 Symbol ❯

JavaScript/CSS Table Sorting Functionality

Category

In this section, we will learn how to implement table sorting functionality using JS/CSS.

First, let's see the effect: Clicking the button will sort the table (in ascending alphabetical order, based on the Name field):

Sorting Code

Example

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Set a loop */
  while (switching) {
    // Set the loop end flag
    switching = false;
    rows = table.rows;
    /* Loop through the table rows */
    for (i = 1; i < (rows.length - 1); i++) {
      // Set the element switching flag
      shouldSwitch = false;
      /* Get the elements to compare */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Check if the next element should switch with the current one
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        // Set the switching flag and break the current loop
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If the element switching is set to true, perform the switch */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Sorting by Clicking on Table Headers

Click on the table header field to sort the table.

The first click sorts in ascending order (A to Z).

Click again to sort in descending order (Z to A).

Example

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable2");
  switching = true;
  // Set ascending order
  dir = "asc";
  /* Set a loop */
  while (switching) {
    // Set the loop end flag
    switching = false;
    rows = table.rows;
    /* Loop through the rows, starting from the second row */
    for (i = 1; i < (rows.length - 1); i++) {
      // Set the element switching flag
      shouldSwitch = false;
      /* Get the elements to compare,
      one from the current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Check if the next element should switch with the current one (asc or desc): */
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          // Set the switching flag and break the current loop
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Set the switching flag and break the current loop
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* If the element switching is set to true, perform the switch */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Increment switchcount each time a switch is done
      switchcount ++;
    } else {
      /* If no more switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

Numeric Sorting

Example

if (Number(x.innerHTML) > Number(y.innerHTML)) {
  shouldSwitch = true;
  break;
}
❮ Java Stringtokenizer Intro Es6 Symbol ❯