Introduction
If a feature you need isn't included in the core jQuery library, someone might have already developed it in a plug-in. This article demonstrates table functionality added by the Tablesorter plug-in.
Demonstration
Here's a table. In addition to the alternating row colors and the "hover row", this table features JavaScript based sorting if the user clicks on the headers.
| 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 |
| FLANDERS (NE) | 09/22/2004 | Centralia | 24 | -428710.00 |
| HOLGATE (H) | 12/2/2005 | Bellvue | 11 | -592496.15 |
| 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 |
| HAWTHORNE (H) | 02/13/2006 | Tacoma | 12 | -99 |
| FLANDERS (NE) | 06/22/2004 | Centralia | 21 | -999 |
| HOLGATE (H) | 11/17/2005 | Bellvue | 26 | 6.00 |
| KLICKITAT (K) | 05/29/2005 | Portland | 8 | 99.63 |
| 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 |
| FLANDERS (NE) | 09/18/2004 | Centralia | 22 | -30 |
| HOLGATE (H) | 11/15/2005 | Bellvue | 28 | 9000 |
| KLICKITAT (K) | 06/19/2006 | Portland | 7 | 60 |
| SANDY (S) | 07/31/2005 | Tacoma | 30 | 12 |
Code
This simple table doesn't contain any fancy mark-up. In fact, this is the same table as in my earlier core jQuery functionality article. 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 class="sortable">
<thead>
<tr>
<th>Customer</th>
<th>Date</th>
<th>City</th>
<th>Store ID</th>
<th>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>
<tr>
<td>BARBUR (B)</td>
<td>7/26/2004</td>
<td>Portland</td>
<td>13</td>
<td>-206012.91</td>
</tr>
...
</table>
Here's the CSS:
<style type="text/css">
table.sortable
{ margin-left: auto;
margin-right: auto;
border: 1px solid #000000;
background-color: #FFFFFF;
border-collapse: collapse;
font-size: 80%;
color: #000000;
}
table.sortable td, table.sortable th
{ border: 1px solid #000000;
padding: 3px;
}
table.sortable th
{ font-size: 110%;
font-weight: 600;
color: #FFFFFF;
background-color: #3E577B;
}
table.sortable th.sort_header
{ text-decoration: underline;
cursor: pointer;
}
tr.odd
{ background-color: #E0E0E0; }
tr.over td
{ background-color:#FFFF99; }
</style>
jQuery Code
The jQuery calls to add the table sorting is quite simple. The first line groups all of the other commands inside a "when the DOM is ready" command.
$(document).ready(function(){
// Adds sort_header class to ths
$(".sortable th").addClass("sort_header");
// Adds alternating row coloring to table.
$(".sortable").tablesorter({widgets: ["zebra"]});
// Adds "over" class to rows on mouseover
$(".sortable tr").mouseover(function(){
$(this).addClass("over");
});
// Removes "over" class from rows on mouseout
$(".sortable tr").mouseout(function(){
$(this).removeClass("over");
});
});
The second line selects all <th>s that are inside something with a class of sortable, and adds the sort_header class to them. Doing this via JavaScript ensures that only users with JavaScript enabled will see the underline and different mouse cursor on the header rows that indicates that clicking on them might do something.
The third line enables the sortable table, and adds "zebra striping" (alternating row coloring) to the table by specifying odd or even classes for each row.
The next group of lines (4, 5, and 6) select any <tr>s inside something with a class of sortable, and, when the mouse is over them, adds the over class to them.
The next roup of lines (7, 8, and 9) removes the over class from those <tr>s when the cursor moves away.
The last group simply closes the document.ready function.
Browser Modifications?
I have tested this in Firefox 3, Internet Explorer 7, Internet Explorer 6 and Safari 3. Part of the advantage of using a library like jQuery is that someone else generally takes care of the cross browser compatibility issues.
