The “Unobtrusive Table Sort Script”, that addresses speed issues present within version #1.
Features…

* Plays nicely with the JavaScript global namespace (the script creates and reuses only one JavaScript object)
* Multiple columns can be sorted at once by pressing Shift while selecting the columns using either the keyboard or mouse
* The new script sorts (on average – based on my very non-scientific calculations), 5 times faster than its predecessor
* The plug-in architecture makes writing custom sort functions a breeze
* The script can highlight both alternate rows and full columns on a table by table basis.
* Like its predecessor, the script is fully keyboard accessible
* The script can correctly determine a columns datatype should a datatype not be explicitly defined (datatypes determined are limited to numbers, text, currency values and dates)
* The script is smart enough not to sort columns containing identical data
* Sort routines can be initiated using JavaScript
* Tables can be automatically sorted on a column (or columns) of your choice, even in reverse order
* Before-sort and after-sort callback functions (or Object.methods) can be defined for individual tables

The Slowdown

The original script attempted to grab the inner text of every TD node within the column to be sorted, each and every time the sort routine was activated. This was an extremely processor intensive action and the main cause of slowdown during the sort of large tables. While a limited “cache” system was offered, it relied heavily on use of the JavaScript “in” operator, which is itself notoriously slow to process.
Speeding things up

The new script addresses these issues by creating and storing an internal representation of the parsed table data the very first time that one of the table’s sortable TH nodes is activated (i.e. a 2D matrix of the parsed table data).

The data stored within this internal object is then reused during each subsequent sort action. This means that there is a slight processing overhead the first time the sort is activated (as an internal representation of the table’s data has to be created) but subsequent sorts, on any of the table’s columns, are much faster than in the previous incarnation of the script.

A listing of sample sort times for a 100 row table can be located within the dynamic table creation demo.
Sortable datatypes

The script can currently sort dates (dd-mm-yyyy, mm-dd-yyyy or yyyy-mm-dd formats accepted), currency values (£, $, €, ¥ and ¤), numbers/floats and finally, plain-text (sorted in a case-insensitive manner). Additionally, the character used as the date divider (i.e. the character that separates the date parts) can be “/”, “-”, “.” or “ “ (space).

Should you need to sort a bespoke datatype, the script can easily be extended by providing a custom sort function.
Making any column sortable

To make any table column sortable, just give the associated table header (TH) tag the class sortable, the script will automatically determine the column datatype, make the entire table header clickable (and not just the text contained within) and create the appropriate up/down arrow within the header when clicked (using the ↑ & ↓ characters).

An example showing the most basic classes required by the script is shown below:

<table id="test1">
  <thead>
    <tr>
      <th class="sortable-numeric">Rank</th>
      <th class="sortable-text">Movie</th>
      <th class="sortable-date-dmy">Release Date</th>
      <th class="sortable-currency">Weekly Gross</th>
      <th class="sortable-numeric">Change</th>
    </tr>
  </thead>
  ... snip ...
</table>
   

It is recommended that you always try to stipulate the column datatype as shown in the above example as this speeds up the initialisation process (as the script no longer has to parse the column data in order to determine the column datatype therefore saving precious clock cycles).
A note on the date format

The script currently favours the American date format of “mm-dd-yyyy”. This is the first format that all dates are tested against during the data preparation phase, which means that European dates such as 10-08-2006 (i.e. the 10th August 2006) will be parsed as the 8th October 2006.

Should your dates be of the European format “dd-mm-yyyy”, add the class sortable-date-dmy to the TH node instead of the class sortable-date, this will tell the script to attempt to parse a DMY format date before attempting to parse a MDY format date.
A note on sorting numeric data

The sortNumeric method bundled with the source code is quite ruthless with the data passed to it. It will replace any character not valid for use within a floating point number and then attempt to parse a float from the result.

This means that the sortNumeric method can be used to sort all manner of numeric column data, for example; columns containing percentages e.g. -22%, 34.6% etc do not require a bespoke sort function in order to be sorted – giving the column the className sort-numeric will suffice.

Forcing a column to “reverse sort” by default

Should you wish to sort a column in reverse order by default, just give the associated TH node the className favour-reverse (Note the English spelling of favour). The default reverse sort is only taken into consideration when sorting on a single column.
Sorting the table automatically

The script will automatically sort any table that has been given the class sortable-onload-N immediately after the window.onload event fires – where N specifies a className of the form “-colNumber[ r ]” – with “colNumber” being replaced by the integer value of the column to sort and the optional “r” (remove the square brackets and spaces!) stipulating that the
column is to be sorted in reverse.

Multiple columns can be stipulated at once, for example, the classname sortable-onload-3r-4r-5 will automatically sort the table on column 4 (reverse sort), then column 5 (again, using a reverse sort) and finally, column 6.

Please note: the column index starts at 0 and not 1.
Preparing an already sorted column

If you have already sorted the table on a specific column or set of columns when the page is generated, it is necessary to indicate this to the script.

This can be done by adding the following className to the table sortable-onload-show-N, where N specifies a className of the form “-colNumber[ r ]” i.e. an identical className to the form discussed above.

This enables the script to create the appropriate up/down arrows within and set the appropriate className on the table headers without it having to actually sort the table data.

Demo: http://dhtmlsite.com/?start_from=30&ucat=&archive=&subaction=&id=&
Download: http://www.frequency-decoder.com/demo/table-sort-revisited/js/tablesort.js
Source: http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited/

Related Listings:

1. New Sort Table Rows with Ajax Simple sort script using Stuart Langridge’s sortabe.js Some days ago...
2. SortableTables CMF Script A while back I created a sortable tables custom tag...
3. Javascript Sorted Table Javascript Sorted Table In this Sorted Table user can sort...
4. Standardista Table Sorting Standardista Table Sorting is a JavaScript module that lets you...
5. Table Sorter 2.0 tablesorter is a jQuery plugin for turning a standard...

Do you like this post?

Email: