Download "Unobtrusive sortable table" script

Put this into your <HEAD> section

	<style type="text/css">
	body{
		font-size:0.8em;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	table thead td{
		font-weight:bold;
		cursor:pointer;
	}
	/* If you wish to highlight current sortable column, add layout effects below */
	.highlightedColumn{

	}
	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	Sortable table script
	Copyright (C) 2005  DTHMLGoodies.com, Alf Magne Kalleland

	This library is free software; you can redistribute it and/or
	modify it under the terms of the GNU Lesser General Public
	License as published by the Free Software Foundation; either
	version 2.1 of the License, or (at your option) any later version.

	This library is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
	Lesser General Public License for more details.

	You should have received a copy of the GNU Lesser General Public
	License along with this library; if not, write to the Free Software
	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

	Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
	written by Alf Magne Kalleland.

	Alf Magne Kalleland, 2005
	Owner of DHTMLgoodies.com


	************************************************************************************************************/

	var tableWidget_okToSort = true;
	var tableWidget_arraySort = new Array();
	tableWidget_tableCounter = 1;
	var activeColumn = new Array();
	var currentColumn = false;

	function sortNumeric(a,b){

		a = a.replace(/,/,'.');
		b = b.replace(/,/,'.');
		a = a.replace(/[^\d\.\/]/g,'');
		b = b.replace(/[^\d\.\/]/g,'');
		if(a.indexOf('/')>=0)a = eval(a);
		if(b.indexOf('/')>=0)b = eval(b);
		return a/1 - b/1;
	}


	function sortString(a, b) {

	  if ( a.toUpperCase() < b.toUpperCase() ) return -1;
	  if ( a.toUpperCase() > b.toUpperCase() ) return 1;
	  return 0;
	}

	function sortTable()
	{
		if(!tableWidget_okToSort)return;
		tableWidget_okToSort = false;
		/* Getting index of current column */
		var obj = this;
		var indexThis = 0;
		while(obj.previousSibling){
			obj = obj.previousSibling;
			if(obj.tagName=='TD')indexThis++;
		}

		if(this.getAttribute('direction') || this.direction){
			direction = this.getAttribute('direction');
			if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
			if(direction=='ascending'){
				direction = 'descending';
				this.setAttribute('direction','descending');
				this.direction = 'descending';
			}else{
				direction = 'ascending';
				this.setAttribute('direction','ascending');
				this.direction = 'ascending';
			}
		}else{
			direction = 'ascending';
			this.setAttribute('direction','ascending');
			this.direction = 'ascending';
		}

		var tableObj = this.parentNode.parentNode.parentNode;
		var tBody = tableObj.getElementsByTagName('TBODY')[0];

		var widgetIndex = tableObj.getAttribute('tableIndex');
		if(!widgetIndex)widgetIndex = tableObj.tableIndex;

		if(currentColumn)currentColumn.className='';
		document.getElementById('col' + widgetIndex + '_' + (indexThis+1)).className='highlightedColumn';
		currentColumn = document.getElementById('col' + widgetIndex + '_' + (indexThis+1));


		var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
		if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
			if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');
		}

		activeColumn[widgetIndex] = this;

		var cellArray = new Array();
		var cellObjArray = new Array();
		for(var no=1;no<tableObj.rows.length;no++){
			var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
			cellArray.push(content);
			cellObjArray.push(tableObj.rows[no].cells[indexThis]);
		}

		if(sortMethod=='N'){
			cellArray = cellArray.sort(sortNumeric);
		}else{
			cellArray = cellArray.sort(sortString);
		}

		if(direction=='descending'){
			for(var no=cellArray.length;no>=0;no--){
				for(var no2=0;no2<cellObjArray.length;no2++){
					if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
						cellObjArray[no2].setAttribute('allreadySorted','1');
						tBody.appendChild(cellObjArray[no2].parentNode);
					}
				}
			}
		}else{
			for(var no=0;no<cellArray.length;no++){
				for(var no2=0;no2<cellObjArray.length;no2++){
					if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
						cellObjArray[no2].setAttribute('allreadySorted','1');
						tBody.appendChild(cellObjArray[no2].parentNode);
					}
				}
			}
		}

		for(var no2=0;no2<cellObjArray.length;no2++){
			cellObjArray[no2].removeAttribute('allreadySorted');
		}

		tableWidget_okToSort = true;


	}
	function initSortTable(objId,sortArray)
	{
		var obj = document.getElementById(objId);
		obj.setAttribute('tableIndex',tableWidget_tableCounter);
		obj.tableIndex = tableWidget_tableCounter;
		tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
		var tHead = obj.getElementsByTagName('THEAD')[0];
		var cells = tHead.getElementsByTagName('TD');
		for(var no=0;no<cells.length;no++){
			if(sortArray[no]){
				cells[no].onclick = sortTable;
			}else{
				cells[no].style.cursor = 'default';
			}
		}
		for(var no2=0;no2<sortArray.length;no2++){	/* Right align numeric cells */
			if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='right';
		}

		tableWidget_tableCounter++;
	}

	</script>

Put this into your <BODY> section

<table id="myTable">
	<!--
	id of <col> tags should be "col" + index of table(1 = first table, 2 = second table) + _ (underscore) + column index(1.2.3.4...)
	-->
	<colgroup>
		<col id="col1_1"></col>
		<col id="col1_2"></col>
		<col id="col1_3"></col>
		<col id="col1_4"></col>
		<col id="col1_5"></col>
	</colgroup>
	<thead>
		<tr>
			<td>Name</td>
			<td>Age</td>
			<td>Position</td>
			<td>Income</td>
			<td>Gender</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>37</td>
			<td>Managing director</td>
			<td>90.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Susan</td>
			<td>34</td>
			<td>Partner</td>
			<td>90.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>David</td>
			<td>29</td>
			<td>Head of production</td>
			<td>70.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Laura</td>
			<td>29</td>
			<td>Head of marketing</td>
			<td>70.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Kate</td>
			<td>18</td>
			<td>Marketing</td>
			<td>50.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Mona</td>
			<td>21</td>
			<td>Marketing</td>
			<td>53.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Mike</td>
			<td>21</td>
			<td>Marketing</td>
			<td>53.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Mark</td>
			<td>25</td>
			<td>Production</td>
			<td>52.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Peter</td>
			<td>33</td>
			<td>Production</td>
			<td>55.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Jennifer</td>
			<td>24</td>
			<td>Production</td>
			<td>49.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>David</td>
			<td>25</td>
			<td>Photography</td>
			<td>51.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Anna</td>
			<td>42</td>
			<td>Head of photography</td>
			<td>56.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Rita</td>
			<td>30</td>
			<td>Photography</td>
			<td>54.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Magnus</td>
			<td>25</td>
			<td>Freelancer</td>
			<td>65.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Johnny</td>
			<td>29</td>
			<td>Freelancer</td>
			<td>63.000</td>
			<td>Male</td>
		</tr>

	</tbody>
</table>
<script type="text/javascript">
initSortTable('myTable',Array('S','N','S','N','S'));
</script>

Configuration

Table syntax

This script is very easy to set up. First you create your table. Example:

<table id="myTable">
  <colgroup>
    <col id="col1_1"></col>
    <col id="col1_2"></col>
    <col id="col1_3"></col>
    <col id="col1_4"></col>
    <col id="col1_5"></col>
  </colgroup>
  <thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
      <td>Position</td>
      <td>Income</td>
      <td>Gender</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>37</td>
      <td>Managing director</td>
      <td>90.000</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Susan</td>
      <td>34</td>
      <td>Partner</td>
      <td>90.000</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>David</td>
      <td>29</td>
      <td>Head of production</td>
      <td>70.000</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Laura</td>
      <td>29</td>
      <td>Head of marketing</td>
      <td>70.000</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Kate</td>
      <td>18</td>
      <td>Marketing</td>
      <td>50.000</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

It's important that you give your table an "id"(example: <TABLE id="myTable">). The table should also have a <THEAD> and a <TBODY> tag. <THEAD> is used to identify the table header. The <TD> tags here are the ones you can click on to sort the table. The content of the <TBODY> tag is the sortable part of your table.

The <COLGROUP> is used to highlight the column you're table is sorted by. This is an effect you can add by adding css rules to the highlightedColumn class.

Initialize the script

A Javascript function "initSortTable" is used to make your table sortable. You call this function on a line below your HTML table. This function takes two arguments.

ID of table = The id of your table(example:"myTable" for <TABLE id="myTable">)
An array indicating how to sort your table. Possible values: "S" = String, "N" = Numeric, false = No sort)

This is an example of how this function can be called:

Highlight current column

It's possible to add highlight effects to the column the table is sorted by. This is very simple. Just add some css effects to the css class "highlightedColumn",
example:

.highlightedColumn{
background-color:#CCC;
}