Sortable Table 2.

To use a pure javascript data sorting is not the best solution. Especially for the huge amount of data.
The recommended way in this case is to use a pagination mechanism and to sort data on the server and send back the portion of the sorted data using the XMLHttpRequest Object (Ajax technology).
In case if the redesign of the server code is too expensive - use this approach.

This table supports a multilevel sorting. It can be sorted by any secondary, ... (arbitrary number) columns.

First Name Last Name Age Registration Day Y/N/U yes/no Text
Adam Abc 70 Jan 30, 2009, 10:50:23 Yes
Adam Abc 12 Jan 30, 2009, 10:50:21 No
Adam Adams 70 Jan 30, 2009, 12:50:23 Unknown
Jon Abc 9 Feb 28, 2008, 10:50:23 Yes
Jon Ring 11 Jun 1, 2009, 10:50:23 no
Initialization:
1. The table must be valid HTML table with one <tr> element in the mandatory <thead> element, and has only one (mandatory element) <tbody> element.
The behavior of the invalid table markup is unpredictable.
2. Include sortedTable.js into html head.
3. Add some ID to this table (in my case it is 'table_2').
4. At the bottom of your HTML add next javascript code:
<script>
	var config = {
		tableId:'table_2', // the only mandatory parameter
		rowOver:'row_over',
		sortMap:'1,2,3:desc'
	}
	var t2 = new Chth.sortTable();
	t2.init(config);
</script>
I do not use the 'odd_row' and 'even_row' parameters for the configuration. Now the default class names for a stripped table are 'row_a' and 'row_b'.
The new parameter rowOver is an existing class name for the table rows when a mouse is moved over them (try it).

The real magic of this configuration is the sortMap string parameter '1,2,3:desc'.
What does it mean?
This string tells to the javascript table object:

    1. The table was presorted as minimum by column number 1, 'First Name' in ascending order.
    2. To sort by any column on the client side use the next regulation:
       if the values of the current sorted column are equal, compare values:
       column number 1 (First Name) in ascendant order;
       if the values of the column number 1 are equal, compare values:
       column number 2 (Last Name) in ascendant order;
       if the values of the column number 2 are equal, compare values:
       column number 3 (Age) in descendant order.

Note: the arrow image now indicates the order of the sorting for the 'First Name' column (first column from the sortMap).
If you click on this column first time, instead of sort again in ascendant order it will sort in the proper one (this column will be never sorted again, see explanation below).
The table can be sorted even by the <input> fields (it is not good idea at all, that is why I made them DISABLED. Use sorttable_customkey for any arbitrary data: see previous page sortedTable_1.htm).

The sorting by several fields requires a lot of resources.
For sorting the table that has a 'sortMap' I made some optimization:
1. I use 'selection sort' algorithm. selection sort
Wikipedia: "There is no other algorithm with less data movement."
2. The second click on the header will just revert the whole table (no sorting).
3. During the first sorting by some particular field I create the 'sorted key map' and never resort by this field again. Only reorder the table rows according to the indexes of the sorted key map. (my testing table with 200 rows shows the 4 time faster execution).
The indexes of the first field from the 'sortMap' is created during the table initialization (during creating the stripped table). That means: the column which is a first one in the 'sortMap' string will never resorted.
If you created the 'sortMap' but are not sure about server presorted data you have to add an extra parameter into config variable: presortedTable:false (default is true if the sortMap string parameter exists). In this case the table will be always resorted for the first click and reversed by the second one.


!!! The real situation may be more sophisticated.
What if for one or more table column you need another sorting rules than you specified in the sortMap parameter?
For example: you want that if a user clicks on the column 6 ('yes/no') the table will be sorted in the next order:
    1. sort by the value of this column.
    2. if compared values are equal   - compare the values from the column 5 in descendant order.
    3. if these values are equal again - compare the values from the column 4 in ascendant order.
In this case you have to specify the personSortMap parameter for configuration. personSortMap: { '6' : '5:desc, 4' }
Now the clicking on any header field will trigger the sortMap rules, but if you click on the column 'yes/no' (6), the rules for the nested sorting will applied from the personSortMap parameter.
That is it.
You can overwrite the arrow images by parameters: img_up, and img_down.
The css class name for managing the visual performance of these images is: sortionImg.
You can create the css class for the rowOver and put it as a parameter (default does not exists).
If you need to add a searching (filtering) mechanism to this table read the next page: Filtered Table 1.