-->
Bookmark and Share

Table Sort

See the demo page for the finished version of the code.

A Sorting Example

Below is the planets table again, with the column headers set up as links to call sortTable() for the corresponding column.

The Planets
Name Diameter (mi.) Distance
(mi. x 1000000)
Rotation (hrs.) Period (days)
Mercury 3032 36.0 1407.6 88
Venus 7521 67.2 5832.5 225
Earth 7926 93.0 23.9 365
Mars 4222 141.6 24.6 687
Jupiter 88846 483.8 9.9 4331
Saturn 74897 890.8 10.7 10747
Uranus 31763 1784.8 17.2 30589
Neptune 30775 2793.1 16.1 59800
Pluto 1485 3647.2 153.3 90588

Not bad, but we need not stop there. What about sorting in reverse order, from highest to lowest? Or both?

Sorting in Descending Order

Reversing the sort order is pretty simple, you just negate the value returned by the compareValues() function while sorting. In fact, with just a few lines of code, we can make the columns sortable in both directions.

Here's the start of the sortTable() function with the new code.

function sortTable(col) {

  // Get the table section to sort.
  var tblEl = document.getElementById("planetData");

  // Set up an array of reverse sort flags, if not done already.
  if (tblEl.reverseSort == null)
    tblEl.reverseSort = new Array();

  // If this column was the last one sorted, reverse its sort direction.
  if (col == tblEl.lastColumn)
    tblEl.reverseSort[col] = !tblEl.reverseSort[col];

  // Remember this column as the last one sorted.
  tblEl.lastColumn = col;

  ...

First, we add a couple of user-defined properties to the table section node, reverseSort and lastColumn. The first time the function is called, reverseSort is defined as an array. It will be used to keep track of the current sort direction for each of the columns in the table. The lastColumn property simply keeps track of which column was sorted the last time the function was called for the table.

Now, if the user clicks on the sort link for the same column twice in a row, the code will detect this and toggle the reverseSort flag for that particular column.

Within the actual sort, we add a couple of lines of code to check that flag. If it's set, we negate the value returned from compareValues(), causing the sort direction to be reversed.

      ...

      cmp = compareValues(minVal, testVal);
      // Reverse order?
      if (tblEl.reverseSort[col])
        cmp = -cmp;

      ...

Let's try it out. Here's another table with the same planet data. But this one uses the modified version of sortTable().

The Planets
Name Diameter (mi.) Distance
(mi. x 1000000)
Rotation (hrs.) Period (days)
Mercury 3032 36.0 1407.6 88
Venus 7521 67.2 5832.5 225
Earth 7926 93.0 23.9 365
Mars 4222 141.6 24.6 687
Jupiter 88846 483.8 9.9 4331
Saturn 74897 890.8 10.7 10747
Uranus 31763 1784.8 17.2 30589
Neptune 30775 2793.1 16.1 59800
Pluto 1485 3647.2 153.3 90588

You can now change the sort direction of each column independently.

The sort function can be modified in other ways to better accommodate both the table data and its presentation. We'll look at some ideas next.