Old-School Dynamic HTML: Sorting Tables
The power of primacy continues to go underestimated by me as the habit of useless complexity percolates. When the time came to sort by table columns in a web page, my response has been to post to the server and re-render the entire page. Silly me.
Like ye olde monkeys banging the typewriters, eventually I stumbled upon the straight-forward question, ‘Why can’t I sort a table using JavaScript and not post back to the server?’ The banana-shaped table below summarizes:
| JavaScript masterpieces by Michael Synovic | “[Demo—Table Sorting](http://m.synovic.home.att.net/code/tablesort.html)” provided me with the foundation to write my own *generic* table sorter. I will publish my findings to SonghaySystem.com soon…
Also check out his JavaScript Hashtable, another classic. |
| [Standardista Table Sorting (A client-side JavaScript Table Sorting module)](http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting) | This one has a framework feel—and, like most JavaScript frameworks, it’s too big for me. Also the comments about the script were not very glowing. |
| The [WebFX Sortable Table](http://webfx.eae.net/dhtml/sortabletable/sortabletable.html) | This one does not modify static tables. It uses `document.write()` to build a table. It’s not unobtrusive enough for me. |
| “[Sortable Table](http://www.mattkruse.com/javascript/sorttable/source.html)” by Matt Kruse | Matt wrote this one back in 2003 and it feels like its trying to be backwards compatible with the oldest, most funky browsers. This makes the code lengthy. Looks hard to maintain… |
| Mike Hall’s “[Table Sorting Demo](http://www.brainjar.com/dhtml/tablesort/demo.html)” | This one is from 2002 and only serves a historical purpose in the rasx() context. Interesting read. |
| “[Sorting HTML Tables using Javascript](http://www.codeproject.com/jscript/sorttable.asp)” by Han Yu | A highly regarded historical piece. This one shows that sorting by a type other than text can get quite complicated. One workaround is to render hidden `span` elements with style `display:none;` and use these to sort by strings only. More on this later… |