Mingyi's Javascript for sorting HTML tables

What can be sorted? - Anything!

If you're looking for my TableSort Firefox extension that makes any table on the web sortable/filterable/copiable in Firefox, go here

A quick demo is below, but read on for features and more demos! (to sort the tables below, you could either click on the headings, or press 'ctrl'+'alt'+click anywhere inside the table!)

NOTE that the "Dollar" column is sorted at the loading of the page, "Names" column is forced to be sorted descendingly only (if user try to sort again, an optional message will tell them that), "IP addresses" is specified as no sorting (move your mouse over and an optional popup message will tell you). Also note that after sorting, the popup description of the sorting links changes along with the color of the links. These are all customizable.

US time European date (D/M/Y) & time Y-M-D date & time Dollar Chinese money IP addresses Names Numbers
this is footer row number ONE! adsf adsf adsf adsf

Index of this page:

What's new
How to use this script
Authors and feature lists
License
Instructions for advanced usage
Demo table 1 (Table w/ header/footer, sorts currency, IP, many custom date and time formats, (scientific) numbers, names and preserves alternate highlighting)
Demo table 2 (A medium-sized table with th tags and similar data)
How to download

What's new for this table sorting script:

How to use this script:
  1. Put this script inside the same directory as the HTML file that uses it ( of course, you can put the script in any web directory that you like).
  2. Put <script src="sorttable.js"></script> in your html page section. Or, if you put the sorttable.js in another directory, put the path of that directory into the src, e.g. src="/absoluteURLpath/sorttable.js" or src=" relativeURLpath/sorttable.js"
  3. Add class="sortable" to the tables you want sorted (if your table html tag was previously <table>, now it'd be <table class="sortable">; if it used to be <table class="old_style">, now it'd become <table class="old_style sortable">)
That's it! Now you can already sort any "sortable" table on your page! If prefered, you could set the variable sort_only_sortable to false to have all the tables on your page sortable by default!

How to sort:

Either click on the links in the first table row, or simply click left mouse button inside any table cell of an HTML table while pressing both the "alt" key and "ctrl" (I write the key sequence as 'ctrl+alt+click'). Please note that if you want all the tables on your page to be sortable, you could just set the varialbe sort_only_sortable in sorttable.js to false. Then you don't need to add "sortable" class to each table to make them sortable!

Authors and feature lists:

This script is written by Mingyi Liu. A small yet significant part of the table sorting code was initially based upon an excellent script by Stuart Langridge. But now the features and even the sorting algorithm are already way beyond what any other script offered.

Mingyi's script's feature list:

Feature list 1 - The power features that are unique to my script (no other script on the web has these features or comes close AFAIK):
  1. Sort US, European, mixed style and user-specified dates (and time)! It's not trivial!
  2. Support keyboard shortcuts for quick access to sorting (e.g., press 'ctrl+alt'+click anywhere in table to sort)!
  3. Support various levels of style preserving (row-level, cell-level or table-level (default)) after sorting. Particularly useful for the table rows that're alternatively highlighted (e.g., odds rows yellow, even rows blue).
  4. Support for user-supplied sorting function for any custom data type.
  5. Allows table sorting on page loading, force columns to be not sortable or only sortable in one direction. One could even optionally force all table to be sortable by default (without having to specify a 'sortable' class).
  6. Sorted tables can remember their states (so when user leaves the page and comes back, the tables remain sorted the way the user left the page with). This is also an optional customizable feature.
  7. Has a very popular FireFox extension evolved out of this script!
Feature list 2 - you'd be hard pressed to find ALL the features below in any other solutions:
  1. Easy to use, runs very fast, X-browser
  2. Support multiple tables on the same html page.
  3. Works with thead, tbody, th, etc. html tags and allows multi-row header and footer.
  4. Intelligent sorting - Automatically detects data types so that sorting is correct. For example, this script would recognize that 0.5 and 5E-1 are the same values, '06/22/1996 16:59:02' and '06/22/1996 04:59:02 PM' are the same time.
  5. Allow force sorting of unrecognized currencies.
  6. Allow customization of the style of the table heading clickable links. Allows customization of (warning) messages as well.
  7. Improved reliability over offending data (like non-number in a number column).
  8. Too many small customizable features to name, please check the script customizable parameters instead.

License:

 You can do whatever you want with the script, but please at least keep the above header section containing the author name and script URL intact. BTW, also observe the tradition of most freewares - no warranty provided and use it at your own risk! ;)
This script is absolutely free. I did put a LOT of time into making this script the best on the web by far AND cater to almost EVERY request that users made so far, so if you like it, please take some time to vote for it here.

Advanced usage:

 I'm a little tired of doing html-ization on the "Advanced usage" section in the script to present it here, so please read the info in the script directly. Sorry for any inconvenience, but please note that the script always contains the most up-to-date feature list, license detail (still free of course!), usage info!

How to download the script

 Right click on this link (35 kb file) or here (a compressed version, only 15 kb but not easy to read/customize) and choose to save it as sorttable.js into the folder where your html files are.

Demo Table 1

This 20-row table is using preserve_style="row" to preserve the alternative highlighting of the odd/even rows.

It demonstrates sorting of both automatic detection of data types (US time, IP, name, numbers) and user-specified data types (european dates, custom dates (Y-M-D), YMB currency).

Note that in addition to double-digit or four-digit years, a lot of date/time formats are acceptable (as many as you designate to have my code to convert your date/time format to sth. JS Date class can parse, which is probably best explained here). You can even mix all the formats, as shown below!

> The table used 'thead', 'tfoot' and 'tbody' html tags and demos multi-row table header and footer.

this is footer row number ONE! adsf adsf adsf
this is footer row number TWO! adsf adsf adsf
US time European date (D/M/Y) & time Y-M-D date & time Chinese money IP addresses Names Numbers
this is header row number TWO! TWO! TWO!

Demo Table 2

This 75-row table is not using preserve_style="row" since there's no alternative row highlighting. It shows that custom-date-types are sorted slower than US dates due to time-consuming date conversion

The table used 'th' tags

US time European date (D/M/Y) & time Y-M-D date & time Chinese money IP addresses Names Numbers