Table Sort

Get It

You can make this project with just this one JavaScript file:

Purpose

The purpose of this project is to let you easily sort tables in ascending or descending order. It has these features:

You can specify which tables are sortable and leave others alone.
You can mark certain rows (special headers, e.g.) to be left undisturbed by the sorting process.
You can specify what kind of sort each column gets: numeric, alpha, date, special sorts, and custom sorts.
It inserts a triangle to indicate the sort column and sort order.

How It Works

Include the JavaScript file, set special classes on your table, and call the init method.

When the table rows get moved to new places in the table, any special formatting gets moved with them. This includes rows that might have been made invisible or rows that have been colored differently.

Getting Started

Reference the hfstablesort.js JavaScript file in the head section of your HTML file.

<script type='text/javascript' src='hfstablesort.js'><script>

Give your table two special classes. The class hfstablesort says your table is sortable. The second class, hfssort_xxxxxx, tells it what kind of sort to do on each column, where xxxxxx is a string of mnemonics that indicate the sorts. Here is an example:
```
<table class="hfstablesort hfssort_haalana">
```
Available sort options are these:
a = alphabetic
b = alphanumeric (with non-alphanumeric characters sorted low)
d = date
l = last name
n = numeric
p = round dance phase
s = square dance level
w = day of week
z = file size
hijk = custom sorts
Invoke the hfsTableSortInit() method in a script at the very bottom of your HTML file or in an onload() handler.
```
hfsTableSort.hfsTableSortInit();
```
(Optional.) Write the custom functions for any custom sorts you specify. The custom function accepts two parameters a and b. Each parameter is an array, of which the first element is the sort key, and the others can be ignored. So a prototypical custom sort function would look like this:
```
function sort_custom_h (a,b) 
{
  return (some_comparison (a[0], b[0])); // compare the keys
}
```

Example

The sample below has the following features:

The second class is hfssort_haalana.
The a columns are simple alpha sorts: Course, Description, Grade, and Certificate.
n specifies a numeric sort on the % column.
l specifies a last name sort. It sorts the instructor name based on the second word in the column, not the first.
h specifies a custom sort. When the sort mnemonic is h, i, j, or k, then you must write a function with the name sort_custom_h, sort_custom_i, sort_custom_j, or sort_custom_k. In this case, the first column needs a custom sort on term (Spring, Summer, or Fall) and year. The hfsTableSort object does not have such a function, so we included one at the end of this HTML file.

The custom function looks like this:

var terms = [ "Spr", "Sum", "Fall" ];

function sort_custom_h (a,b) 
{
  // this is a custom sort for "Season, Year" as in column 1
  // The a and b variables are arrays as follows:
  // a[0] is the key value for the first compare item
  // a[1] is the contents of the entire row
  // a[2] is the display style on the row (possibly "none," i.e. invisible)
  // a[3] is the class name on the row, which may be used to stripe it
  // In general, we use only a[0] and b[0], because we want to compare the keys.
  var aa = a[0].split(" ");
  var bb = b[0].split(" ");

  // start by comparing the years
  if (aa[1] < bb[1]) return -1;
  if (aa[1] > bb[1]) return 1;

  // if year is the same, compare the season/term
  return (terms.indexOf (aa[0]) - terms.indexOf (bb[0]));
}