Blog

Sort your tables using Javascript
Posted by admin in Programming on 10.17.06

I’m using this on a project and want to suggest it for others. Almost any time that you have to present information in a table, you’ll probably want to make that table sortable. These folks came up with a good trick, and one easy to implement:

While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they’re for laying out tabular data. For instance, imagine a table of employees.

Name Salary Extension Start date
Bloggs, Fred $12000.00 1353 18/08/2003
Turvey, Kevin $191200.00 2342 02/05/1979
Mbogo, Arnold $32010.12 2755 09/08/1998
Shakespeare, Bill $122000.00 3211 12/11/1961
Shakespeare, Hamnet $9000 9005 01/01/2002
Fitz, Marvin $3300 5554 22/05/1995

Pretty simple. But if you saw that table in a client-side application, you’d expect to be able to click on the headers and have the table sort, would you not?

Their code makes any table suddenly sortable. Like columns in Excel, or Lotus 123. Which is a very good useablity improvement.

Best of all, this script is drop-dead easy to install. Just include the file on your page:

<script type=”text/javascript” src=”sorttable.js”></script>

And then give your table the class “sortable” and a unique id like this:

<table class=”sortable” id=”unique_id”>

Could not be easier.



Leave a Reply