/* text */
.text
	{font-family: verdana,arial,sans-serif; 
	font-size: 9pt;
	padding-bottom: 3}

.boldtext
	{font-family: verdana,arial,sans-serif; 
	font-size: 9pt;
	padding-bottom: 3; 
	font-weight: bold}
	
.copyright
	{color: 666666; 
	font-family: verdana,arial,sans-serif; 
	font-size: 8pt; 
	padding-right: 6}

.Login 
	{padding-right: 6; 
	padding-bottom: 3;
	font-family: verdana,arial,sans-serif; 
	font-size: 8pt}
	
.TinyText
	{font-family: verdana,arial,sans-serif; 
	 font-size: 8pt}
	 
.BlackText
	{font-family: verdana,arial,sans-serif;
	 font-size: 9pt}

.BlueText
	{font-family: verdana,arial,sans-serif;
	 color: #00659C;
	 font-size: 9pt}
	 
.GreenText
	{font-family: verdana,arial,sans-serif;
	 color: #468C46; 
	 font-size: 9pt}			 		 
				 		 
.BoxNew
    {padding-right: 3; 
	 padding-left: 6;
	 padding-bottom: 6;
	 font-family: verdana, arial, sans-serif; 
	 font-size: 9pt}
div
  {font-family: verdana,arial,sans-serif; 
	font-size: 9pt;
  }
.divider
	{ COLOR: Gray; BACKGROUND-COLOR: Gray}
 
/* links */
A { COLOR:#000000 }

A:hover { COLOR:ff0000 }

.ACopyright {
	COLOR: #666666
}
.ABlue  {font-family: verdana, arial, sans-serif;
		color: #00659C;
		font-size: 9pt}

.ABlack  {font-family: verdana, arial, sans-serif;
		color: #000000;
		font-size: 9pt}
.LeftNavLink
             {color: #000000; 
			  text-decoration: none;
			  font-size: 8pt;
			  font-weight: bold;
			  font-family: verdana, arial, sans-serif}

/* Images */
.BORDER{
	border : thin solid Gray;
}
/* Nav Bar */
.NavBarGray 
	{background: #ACBBC2; repeat-x; 
	padding-left: 6; padding-right: 6; 
	font-family: verdana, arial, sans-serif; 
	font-size: 9pt;
	font-weight: bold}

.NavBarGray A
	{color: black; text-decoration:underline}

.NavBarBlue
	{background: #DAE7EC; 
	padding-left: 6; padding-right: 6; 
	font-family: verdana,arial,sans-serif; 
	font-size: 9pt; font-weight: bold}

.tbarGray
	{font-size: 8pt; 
	 font-family: verdana, arial, sans-serif; 
	 color: #869197;
	 font-weight: bold;
	 text-decoration: none;
	 text-align: top}

.PageTitleGray
     {font-size: 13pt; 
	  font-family: verdana, arial, sans-serif; 
	  color: #6C818B;
	  font-weight: bolder;
	  padding-bottom: 3;
	  text-decoration: none}
	  
.PageSubTitleGray
     {font-size: 10pt; 
	  font-family: verdana, arial, sans-serif; 
	  color: #6C818B;
	  font-weight: bolder;
	  padding-bottom: 3;
	  text-decoration: none}

.EIUnavTitleBar
      {background: #DAE7EC url(/wdata/images/tiles/tile_blue_vertical.gif) repeat-x}
	  
.TileDotHorizontal
   {
	padding-top: 3px;
	background: white url(/wdata/images/tiles/tile_dot_horizontal.gif) repeat-x;
	padding-bottom: 3px;
  }

.TileDotVertical
   {background: white url(/wdata/images/tiles/tile_dot_vertical.gif) repeat-y}

.columnruleGrayVertical
	{background: white url(/wdata/images/tiles/tile_gray4_1px.gif) repeat-y; padding-right: 3; padding-left: 3}

.columnruleGrayHorizontal
	{background: white url(/wdata/images/tiles/tile_gray4_1px.gif) repeat-x}

/* tables */

.TableBodyBlue {font-family: verdana, arial,sans-serif; 
	            font-size: 9pt;
				text-align: left;
				background: #E3EEF3}
				
.TableBodyLightBlue {padding-left: 6;
                     font-family: verdana, arial,sans-serif; 
	                 font-size: 9pt;
				     text-align: left;
				     background : #EDF6F9}
.TableBodyGray    {background: #ACBBC2; 
	              font-family: verdana, arial, sans-serif;
	              font-size: 9pt}

.TableBodyWhiteInsert {font-size: 10pt; 
	                   font-family: verdana, arial, sans-serif; 
	                   text-decoration: none;
				       background: #F6FBFC}					  
.table {font-family: verdana, arial,sans-serif; 
	    font-size: 9pt;
	    border-top: 2px solid black;
	    border-bottom: 2px solid black;
	    border-left: 2px solid black;
	    border-right: 1px solid black;
}
.th {border-right: 1px solid black;
     border-bottom: 1px solid black;}

.td {border-right: 1px solid black }

.tbd
    {color:666666; 
	background-color:F9F9F0;
	text-align: left;
	vertical-align: bottom;
	font-size: 7pt; 
	font-family: verdana,arial,sans-serif;
	border-top: 1px solid #CCCCCC;
	font-weight : normal; 
	border-right: 1px solid #CCCCCC}
	
.tbdtop
    {color:666666; 
	background-color:F9F9F0;
	text-align: left;
	vertical-align: top;
	font-size: 7pt; 
	font-family: verdana,arial,sans-serif;
	border-top: 1px solid #CCCCCC;
	font-weight : normal; 
	border-right: 1px solid #CCCCCC}
	
.tbdRight
    {color:666666; 
	background-color:F9F9F0;
	text-align: right;
	vertical-align: bottom;
	font-size: 7pt; 
	font-family: verdana,arial,sans-serif;
	border-top: 1px solid #CCCCCC;
	font-weight : normal; 
	border-right: 1px solid #CCCCCC}			
	
.tbc{font-size: 9pt;
	color: #000000;
	font-family: verdana,arial,sans-serif;
	margin-bottom: 5px;
	text-align: left;
	vertical-align: bottom;
	font-weight : bold;
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC
	padding-right : 3px;
	background-color: #EFEFD6}
	
.tbcCenter
    {font-size: 9pt;
	color: #000000;
	background-color: EFEFD6;
	font-family: verdana,arial,sans-serif;
	margin-bottom: 5px;
	text-align: center;
	vertical-align: bottom;
	font-weight : bold;
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC
	padding-right : 3px;
	color: 000000;
	background-color: #EFEFD6}
	
.tbsh{font-size: 10pt; 
	   font-family: verdana, arial, sans-serif; 
	   color: #6C818B;
	   font-weight: bolder;
	   padding-bottom: 3;
	 margin-bottom: 5px;
	 text-align: left;
	 vertical-align: bottom;
	 font-weight : bold;
	 border-top: 1px solid #CCCCCC;
	 border-right: 1px solid #CCCCCC
	 padding-right : 3px;
	 background-color: #EFEFD6}
	  

.data 	{
	font-family: verdana,arial,sans-serif; 
	font-size: 9pt;
	padding-bottom: 3;
	border : thin solid Gray;}


.tdBlueRight {background-color: #E3EEF3;
        margin-bottom: 5px;
        text-align: right;
        vertical-align: bottom}

.tdWhiteRight {background-color: FFFFFF;
          margin-bottom: 5px;
          text-align: right;
          vertical-align: bottom}	

.tdBlueLeft {background-color: #E3EEF3;
        margin-bottom: 5px;
        text-align: left;
        vertical-align: bottom}

.tdWhiteLeft {background-color: FFFFFF;
          margin-bottom: 5px;
          text-align: left;
          vertical-align: bottom}					
iframe {
	scrollbar-base-color:#DAE7EC;
}
input {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
}
button {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
}

select {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
}

/*sort table */
 $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? I know it always annoys me when you can't. A fair few web applications do allow this; most of them, which are pulling this data by submitting a SQL query to a relational database (an environment eminently suited to tabular data) implement this by resubmitting the whole page with something like ordercolumn=4 in the URL, and then adding an ORDER BY clause to their SQL query to return the data from the DB ordered by the specified column.

Resubmit the page? Just to sort data we already have? I'm sure we can do better than that.

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 

As you can see, the above table now has clickable headers that sort the table by the clicked column. Note how the numeric and date columns all sort properly, too, rather than sorting alphanumerically.

This is not a new trick, sorting a table using the DOM. However, this mini-library has two nice attributes; the first is, unsurprisingly, that it follows my principles of unobtrusive DHTML, as you'll see below. The second is that, as mentioned above, it knows how to sort a variety of different data types, and it works them out for itself -- you don't have to tell it.

First, how to use it, then we'll get on to How It Works for those of you who don't want to just take the code and use it (like all the other JS libraries here, it's under the MIT licence). To make a table of your choice sortable, there are three steps:

Include the Javascript library, by putting a link to it in the HEAD of your page, like so: <script src="sorttable.js">Mark your table as a sortable one by giving it a class of "sortable": <table class="sortable">Ensure that your table has an ID: <table class="sortable" id="unique_id">And that's all you need. Your table will now have column sorting available by clicking the headers. For niceness, you might want to add the following styles to your stylesheet, or make up some of your own based on this:


/* Sortable tables */
table.sortable a.sortheader {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    text-decoration: none;
    display: block;
}
table.sortable span.sortarrow {
    color: black;
    text-decoration: none;
}
H1 {font-size: 13pt; 
	  font-family: verdana, arial, sans-serif; 
	  color: #6C818B;
	  font-weight: bolder;
	  padding-bottom: 3;
	  text-decoration: none}
	  
H2 {font-size: 10pt; 
	  font-family: verdana, arial, sans-serif; 
	  color: #6C818B;
	  font-weight: bolder;
	  padding-bottom: 3;
	  text-decoration: none}
	  
	  
BLOCKQUOTE {font-family: verdana, arial, sans-serif;
		color: #00659C;
		font-size: 9pt}

BODY {font-family: verdana,arial,sans-serif; 
	 font-size: 8pt}
	 


S1{font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#000000;
	font-weight: bold;}

S2{font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#000000;
	font-weight: bold;}
	
SUP {font-size:7pt;
	font-weight: normal;
}