Sort Table - Make your HTML tables sortable

Have you ever wanted to make the columns of your html tables sortable? I wanted a table to display in one way for my use but have another column displayed in alphabetical order for use by someone else. I really did not want two separate tables that I would have to update. So I went in search of a way to accomplish this. I found sorttable: Make all your tables sortable by Stuart Langridge. I tried it out and it worked exactly as I wanted.

Instructions:

Download this file to your website
Add <script src="sorttable.js" type="text/javascript"></script> to your HTML in the head section. Adjust the path to the js file if it is not located in the same directory as the table page that uses it.
Add class="sortable" to any table you'd like to make sortable
Note that the library's JavaScript file is called sorttable (two Ts), but the class you add to the table is sortable (one T).
Click on the table headers to sort. This does NOT change the tables on your server. If you want the table displayed permanently in this way, you will need to copy and paste the sorted table to a new document and then upload it to your server.

Testing:

The script was tested using a cleanly coded table. I do not know how well is works if you paste the table from Word or Excel without first cleaning it up. I tested the script with IE 6, IE 7, Firefox (latest version) and Opera (latest version) with no problems. Thanks to Linda Gutierrez for letting me use one of her tables.

Notes:

You can use the tutorials for cleaning up your Word or Excel tables first. Make sure you also include a note to click on the headers in the table to sort the column in alphabetical order. You should also include a note to the effect "You must have Java Script enabled to use this feature." The Witnesses column will only sort the first name.

Advanced Options:

You can visit Stuart Langridge and scroll down to Advanced useage for additional sorting options.

Suggestion from Barry Carlson: the Date column is not truly sortable. This can be overcome by adding the following to the cell containing the date data:<td><span class="date">18871123</span>23 Nov 1887</td> then adding:- .date {display:none} to your css file. Note: The span date is YYYYMMDD, so will need to be kept in that format. The date format you actually display is up to you.

And from Ralph Taylor: In the non-displayed version of the dates, days & months less than 10 should be written as "01", "02", etc. so that they'll sort correctly. Else, "18871123" (23 Nov 1887) will sort before "1887923" (23 Sep 1887).

BRIDE	FATHER	MOTHER	WITNESSES	DATE	GROOM
BARROW, Martha G.	BARROW, Martin	HUGHES, Eliza J.	O'BRIEN, Edward COMMESFORD, Anna	23 Nov 1887	O'BRIEN, Timothy C.
DOLAN, Catherine	DOLAN, Patrick	GRAY, Maria	HARTLEY, James J. ?HASIMA, E. J.	19 Dec 1887	ZIMMERMAN, Andrew
DWYRE, Catherine	DWYRE, John	Not named	FLANNIGAN, Patrick W. MCLOUGHLIN, Catherine	15 Nov 1887	BEGY, Philip
EPPING, Barbara	EPPING, Frank	FISHER, Mary	HARTLEY, James J. HOUSIA, Edw. J.	16 Nov 1887	BOGART, Charles V.
HYATT, Phoebe	HYATT, Theodore	MALONE, Eliza	HYATT, William LEAHY, Hannah	7 Dec 1887	O'BRIEN, Patrick C.
KEARNS, Maria	KEARNS, Richard	CULLEN, Mary	SMITH, William H. BURGER, Margaret	14 Dec 1887	MOORE, Richard
MAXCY, Bridget	MAXCY, Jeremiah	MCLOUGHLIN, Margaret	VECH, Joseph MAXCY, Ida	21 Nov 1887	CORNELL, William
MCEVOY, Catherine	MCEVOY, Peter	BLACKBURN, Anna	BURKE, John BURNS, Bridget	19 Nov 1887	CARR, Hugh
O'KEEFE, Ellen J.	O'KEEFE, Michael	REYNOLDS, Hannah M.	SMITH, Louis O'KEEFE, Charlotte	16 Nov 1887	SNYDER, John L.
PURCELL, Margaret	PURCELL, Thomas	DOYLE, Mary	EMBLOW, William BACON, Eupheima	23 Nov 1887	HARRISON, George H.
RYAN, Margaret	RYAN, Thomas	FITZGERALD, Mary	STUPP, Charles RYAN, Mary	30 Nov 1887	BAINES, William

Examples of Some Sites Using the sorttable script

And a suggestion from Barry Carlson, an "All singing, all dancing" javascript tablesorter. This sorter uses jQuery plugins and can do just about anything - meaning you can configure it to do exactly as you want.

Patricia Geary.