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.
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().
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.