JavaScript - Sortable Table
Introduction
This article pulls together a couple of JavaScript functions to add sorting functionality to an HTML table. This article dates from before I was familiar with jQuery; these days I would use the jQuery library and the Tablesorter Plug-in to get the job done.
Demonstration
This table uses the DOM & JavaScript to sort a table by multiple column headings. It's also JavaScript that provides the alternating row colors, so those are preserved even when sorting. For data that comes from a database, using client-powered sorting such as this prevents page reloads and server access. Click on any of the headers below to sort that column.
| Customer | Date | City | Store ID | Amount |
|---|---|---|---|---|
| ASH (A) | 5/03/2006 | Bellvue | 16 | -$2250539.51 |
| BARBUR (B) | 7/26/2004 | Portland | 13 | -$206012.91 |
| COUCH (C) | 07/04/2006 | Seattle | 23 | -$462118.45 |
| DIVISION (D) | 07/11/2006 | Tacoma | 12 | -$561203.32 |
| BURNSIDE (B) | 09/14/2004 | Portland | 17 | $600.64 |
| LOMBARD (L) | 08/19/2005 | Tacoma | 29 | $9.10 |
| ASH (A) | 5/09/2006 | Bellvue | 9 | $99.01 |
| BARBUR (B) | 12/26/2005 | Portland | 13 | $900 |
| COUCH (C) | 04/01/2005 | Seattle | 19 | -$9 |
| LOMBARD (L) | 07/31/2005 | Tacoma | 27 | $12.00 |
| ASH (A) | 6/03/2006 | Bellvue | 18 | $0 |
| BARBUR (B) | 6/26/2006 | Portland | 15 | $8 |
| COUCH (C) | 04/01/2006 | Seattle | 25 | $.50 |
| DIVISION (D) | 08/13/2006 | Tacoma | 03 | $9 |
Code
This simple table doesn't contain much fancy mark-up. There's just a simple <thead> around the header row, and bunch of regular <tr>s and <td>s. Here's a snippet of the XHTML for the table:
<table cellpadding='3' class='sortable' id='test_sortable'>
<thead>
<tr>
<th class='sortColumn'>Customer</th>
<th class='sortColumn'>Date</th>
<th class='sortColumn'>City</th>
<th class='sortColumn'>Store ID</th>
<th class='sortColumn'>Amount</th>
</tr>
</thead>
<tr>
<td>ASH (A)</td>
<td>5/03/2006</td>
<td>Bellvue</td>
<td>16</td>
<td>-$2250539.51</td>
</tr>
...
</table>
Though all of these styles are defined in the CSS, some of them are applied with JavaScript. Here's the CSS:
<style type="text/css">
table#test_sortable
{ margin-left: auto;
margin-right: auto;
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
color: #000000;
border-collapse: collapse;
font-size: 80%;
}
table#test_sortable thead tr th
{ font-size: 120%;
font-weight: bold
border: 1px solid #000000;
background-color: #3E577B;
}
table#test_sortable tr, table#test_sortable td
{ border: 1px solid #000000;
}
/* These 2 items are for coloring of the sortable table headers. The psuedoclass selectors and !important are used because the default link styles would otherwise override the TH styling. */
a.sortheader:link, a.sortheader:visited, a.sortheader:active, a.sortheader:focus
{ background-color: #3E577B;
color: #FFFFFF !important;
text-decoration: underline !imporant;
}
a.sortheader:hover
{ background-color: #FFFFFF;
color: #3E577B !important;
text-decoration: underline !imporant;
}
/* These 3 items are for alternate-row and sort-column coloring.*/
tr.alternateRow
{ background-color: #e0e0e0;
}
td.sortedColumn
{ background-color: #f0f0f0;
}
tr.alternateRow td.sortedColumn
{ background-color: #d0d0d0;
}
</style>
Credits
This table functionality was not an individual effort. I did research, test, fine-tune, apply, and document the script, so that my entire work group could use it. Any coder who fails to search for and leverage solutions that others have created is fooling themselves and wasting your time. Here's credit where credit's due:
- Bill Rawlinson - http://rawlinson.us/blog/index.php?p=147
- Stuart Landridge = http://www.kryogenix.org/days/2003/11/04/sortable
- Scott Andrew - http://www.scottandrew.com/weblog/articles/cbs-events
- Mike Hall - http://www.brainjar.com/dhtml/tablesort/
There are some issues with the script:
- Odd table resizing due to the removed arrow.
- Number columns with large differences (such as Amount in the example above) sorted as strings.
- Exhibits poor performance when sorting many similar values in a column.
