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.

Prev | Next