Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

JavaScript - Sortable Table

Last Update: 4.27.2009

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:

There are some issues with the script:

  1. Odd table resizing due to the removed arrow.
  2. Number columns with large differences (such as Amount in the example above) sorted as strings.
  3. Exhibits poor performance when sorting many similar values in a column.

Looking for more?

Back to Pew Pew Laser Articles

Contact Me