Click the column headers to sort the table:
Another example (with a custom date sorting function) can be found on the Moo Database browser.
If you aren't familiar with <THEAD> and <TBODY> blocks, it might help to view the source code for the demo on this page.
By default the arrows use the text-only character codes '↑', '↓' and ' ' ('↑', '↓' and ' '). Be aware that different browsers render these characters differently. If you wish to use graphical arrows (as in the demo above), download these three images: arrow-up.gif, arrow-down.gif, blank.gif then add these lines after the initial script import:
If you create a table using DHTML after the page has loaded and want to add sorting links to it,
TableSort.init('someTable') where 'someTable' is the ID of the new table.
If you have a column (such as a date) which requires a sorting order other than 'case', 'nocase' or 'num', a new sorting mode can easily be added. Just create a new comparison function. See the three comparison functions at the end of the script for examples.
IE 5+ (PC), Firefox, Safari, Opera and Chrome perform flawlessly. IE 5 for the Mac has serious layout bugs so the script disables itself under this browser. Older browsers will simply show a static table without sorting links.
Obviously this approach is not suitable for tables which span multiple pages (e.g. results 1-50 of 300). A client-side sort can only sort the data currently available, not your entire server-side database.
Certain languages (such as Japanese) have sorting requirements which transcend the character code values of text. Proper i18n sorting would require implementation of the Unicode Collation Algorithm.