jQuery - Demonstrations and Examples of Tablesorter Plug-in

Last Update: 5.20.2009

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.


Looking for more?

Back to Pew Pew Laser Articles

Contact Me