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.
Copyright © 2008 Pat Geary of Genealogy Web Creations All Rights Reserved