In this tutorial, we will learn how to use JS/CSS to implement the table sorting function.

First look at the effect as follows, click the button to achieve sorting (sort in ascending alphabetical order, located in the Name field):


image.png

Sorting a Table

Example

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Set up a loop statement */
  while (switching) {
    // Set the end of the loop mark
    switching = false;
    rows = table.rows;
    /* Circulate the rows of the table */
    for (i = 1; i <(rows.length-1); i++) {
      // Set whether the element changes position
      shouldSwitch = false;
      /* Get the element to be compared */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Determine whether to switch the next element with the current element
      if (x.innerHTML.toLowerCase()> y.innerHTML.toLowerCase()) {
        // Set the exchange element mark and end the current loop
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If the element swap position is set to true, perform the swap operation */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

  Try It! 


image.png

Sorting By Clicking On The Table Header

Click the header field to sort the table.

When you click for the first time, the sort direction is ascending (A to Z).

Click again, the sorting direction is descending (Z to A).

Tips:

Click the header to sort the table

When you click the button for the first time, the sort direction is ascending (A to Z).

Click again, the sorting direction is descending (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 up a loop statement */
  while (switching) {
    // Set the end of the loop mark
    switching = false;
    rows = table.rows;
    /* Circulate the list, starting from the second line */
    for (i = 1; i <(rows.length-1); i++) {
      // Set whether the element changes position
      shouldSwitch = false;
      /* Get the element to be compared,
      one from current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Determine whether to switch between the next element and the current element (asc or desc): */
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase()> y.innerHTML.toLowerCase()) {
          // Set the exchange element mark and end the current loop
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() <y.innerHTML.toLowerCase()) {
          // Set the exchange element mark and end the current loop
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* If the element swap position is set to true, perform the swap operation */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Every time the swap is completed, increase the switchcount by 1
      switchcount ++;
    } else {
      /* If all elements are sorted and the direction is set to "asc", then the direction is set to "desc" and the loop is executed again */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

  Try It!  


image.png

Number Sorting

Example

if (Number(x.innerHTML)> Number(y.innerHTML)) {
   shouldSwitch = true;
   break;
}

  Try It!