Sort Tables Easily

[Total: 0    Average: 0/5]

This script shows how to have tables built that can be sort by any column.

Head Code:

<style>
A {
	COLOR: yellow; FONT-FAMILY: Arial,  helvetica CE, helvetica; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-WEIGHT:normal;
	text-decoration: none;
}
H6 {
	COLOR: white; FONT-FAMILY: Arial,  helvetica CE, helvetica; FONT-SIZE: 8pt; FONT-STYLE: normal; FONT-WEIGHT: normal
}
BODY {
	COLOR: white; FONT-FAMILY: Arial,  helvetica CE, helvetica; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-WEIGHT: normal
}
TABLE {
	COLOR:black;
	FONT-FAMILY: Arial,  helvetica CE, helvetica;
	FONT-SIZE:9pt;
	FONT-STYLE:normal;
	FONT-WEIGHT:normal;
	display:block;
}

.listTable{
display:none;
z-index:20;
}

.listLine{
background-color:#C00000;
border-style:outset;
color:white;
}
	
.listCellHead{
background-color:#7073FE;
layer-background-color:#7073FE;
border-style:outset;
border-width:1px;
border-left-color:white;
border-top-color:white;
border-bottom-color:black;
border-right-color:black;
cursor:hand;	
}

.listCell{
background-color:#FCFE52;
layer-background-color: #FCFE52;
}
</style>
<!--
////////////////////////////////////////////////////////////////////////////////////
//  cleverTab 1.01  --  This notice must remain untouched at all times.
//  Copyright Cleverlance 2000-2001. All rights reserved.
//
//  By Jan Seda (jan.seda@cleverlance.com).  Last modified 2001-06-01.
//
//  Get the latest version at http://www.cleverlance.com
//
//  This script is published under an open source license. Please read the license
//  agreement online at: http://www.cleverlance.com/license.htm
//  If you have questions regard the license please contact licence@cleverlance.com.
//
//  This script library was originally created for personal use. By request it has
//  later been made public. This is free software. Do not sell this as your own
//  work, or remove this copyright notice. For full details on copying or changing
//  this script please read the license agreement at the link above.
//
//  Please give credit on sites that use cleverTab and submit changes of the script
//  so other people can use them as well. This script is free to use, don't abuse.
//
//  Usage:
//  1) Into you <head> section insert code <script language="JavaScript" src="./table.js"></script> (version with docs)
//  or <script language="JavaScript" src="./mini_table.js"></script> (small-size version)
//  2) to the first line in your table insert to cells (which you want to use for sorting)  code onclick="_tabSort(this);"
//  And its all. Simple isnt it?
//
//  Features:
//  cleverTabv1 enables sorting of table rows according to chosen cell. When cell button is pressed then rows are sorted first in
//  ascending mode and then in descending and so on. Sorting works with strings, integers and with dates. But dates must be in
//  american format (it means using of '-' or '/' dividers as specified in IETF). But for special date formats (like for Eastern Europe) there
//  is not support in Javascript. But we expect to extend javascript with our own libraries. It will be provided in next version.
//
//  cleverTab keeps your style of table untouched but you have to use CSS classes and not STYLE attribute in table's tags. This is because
//  of performace reasons.
//
//  Next version:
//  1) Next version will include support to work with data dynamicly. It means that then you can use table to work 
//  with data without using <form> to send ALL data over the Internet. cleverTable will detect changes on client side and will send
//  just modified data in XML format.
//  2) Sorting of dates with work with other date-formats, like Eastern European
//  Just wait for that new version, its coming soon...
////////////////////////////////////////////////////////////////////////////////////

-->
<script language="JavaScript">

var tabDoc = document;
var _tabSha=null;
var _tabLast=null;
var _tabMode=true;
var _tabDa=false;

function _tabCreateArray(cell){
	var rw=cell.parentElement.parentElement.rows;
	var _tabl=rw.length;
	var _tabS=new Array(_tabl-1);
	var _tmp=null;
	_tabSha=new Array(_tabl-1);
	if (!isNaN(Date.parse(rw.item(1).cells.item(cell.cellIndex).innerText))) _tabDa=true;
	for(var i=1;i<_tabl;i++) _tabSha[i-1]=i;
	for(var i=1;i<_tabl;i++){
		_tabS[i-1]=rw.item(i).cells.item(cell.cellIndex).innerText;
	}
	_tabBubbleSort(_tabS);
}

function _tabBubbleSort(array){
	var ar=array;
	var sh=_tabSha;
	rest=array.length;
	for(var i=rest-1;i>=0;i--){
		for(var j=0;j<=i;j++){
			if (_tabDa){
				if(Date.parse(ar[j+1])<Date.parse(ar[j])){
					var temp=ar[j];
					ar[j]=ar[j+1];
					ar[j+1]=temp;
					var temp=sh[j];
					sh[j]=sh[j+1];
					sh[j+1]=temp;
				}
			}else{
				if(ar[j+1]<ar[j]){
					var temp=ar[j];
					ar[j]=ar[j+1];
					ar[j+1]=temp;
					var temp=sh[j];
					sh[j]=sh[j+1];
					sh[j+1]=temp;
				}
			}
		}
	}
}

function _tabBuildRows(obj){
	var rows = obj.parentElement.parentElement.rows;
	var tb=obj.parentElement.parentElement;
	var ci=rows.item(0).cells.length;
	var tdO = null;
	var trA=new Array(_tabSha.length);
	var trO=null;
	if(tb.rows.length>0){
	for(var i=0;i<_tabSha.length;i++){
		tr = tabDoc.createElement("TR");
		for(var y=(ci-1);y>=0;y--){
			td = tabDoc.createElement("TD");
			tr.insertBefore(td, tdO);
			td.className = 'listCell';
			td.className = rows.item(_tabSha[i]).cells.item(y).className;
			td.innerText = rows.item(_tabSha[i]).cells.item(y).innerText;
			tdO=td;
		}
		tdO=null;
		trA[i]=tr;
	}
	_tabDeleteRows(tb);
	if(_tabMode){
		for(var i=trA.length-1;i>=0;i--){
			tb.insertBefore(trA[i],trO);
			trO=trA[i];
		}
	}else{
		for(var i=0;i<trA.length;i++){
			tb.insertBefore(trA[i],trO);
			trO=trA[i];
		}
	}
	}
	_tabSha=null;
	_tabDa=false;
}
	
function _tabDeleteRows(tb){
	for(var i=tb.rows.length-1;i>0;i--)
	tb.deleteRow(i);
}

	
function _tabSort(obj){
	if (_tabLast==obj) _tabMode=!(_tabMode);
	_tabCreateArray(obj);
	_tabBuildRows(obj);
	_tabLast=obj;
	return _tabMode;
}
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--

	function changeEl (obj, mode) {
		if (mode == 1) {
			obj.style.color = '#FFFFFF';
		} else if (mode == 2) {
			obj.style.color = '#000000';
		}
	}
	
	function setStyle(obj, name, value) {
		obj.style[name] = value;
	}
	
	function clickHead(obj, type) {
		type = parseInt(type);
		if (isFinite(type)) {
			if (type == 1) {
				setStyle(obj, 'border', 'outset');
				setStyle(obj, 'borderWidth', '1px');
				setStyle(obj, 'borderRightColor', 'black');
				setStyle(obj, 'borderBottomColor', 'black');
			} else {
				setStyle(obj, 'border', 'inset');
				setStyle(obj, 'borderWidth', '1px');
				setStyle(obj, 'borderLeftColor', 'black');
				setStyle(obj, 'borderTopColor', 'black');
				setStyle(obj, 'borderRightColor', 'white');
				setStyle(obj, 'borderBottomColor', 'white');
			}
		}
	}
-->
</SCRIPT>

Body Code:

<BODY BGCOLOR="#000000">
	<TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0 WIDTH=100%>
	<TBODY>
	<TR>
		<TD ALIGN=CENTER CLASS="listCellHead" onmouseover="changeEl(this, 1)" onmouseout="changeEl(this, 2)" onmousedown="clickHead(this, 0);" onmouseup="clickHead(this, 1);" onclick="_tabSort(this);"><B>Product</B></TD>
		<TD ALIGN=CENTER CLASS="listCellHead" onmouseover="changeEl(this, 1)" onmouseout="changeEl(this, 2)" onmousedown="clickHead(this, 0);" onmouseup="clickHead(this, 1);" onclick="_tabSort(this);"><B>Producer</B></TD>
		<TD ALIGN=CENTER CLASS="listCellHead" onmouseover="changeEl(this, 1)" onmouseout="changeEl(this, 2)" onmousedown="clickHead(this, 0);" onmouseup="clickHead(this, 1);" onclick="_tabSort(this);"><B>Sale date</B></TD>
	</TR>
	<TR>
		<TD CLASS="listCell">Windows 2000</TD>
		<TD CLASS="listCell">Microsoft</TD>
		<TD CLASS="listCell">12/22/2000</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">Visual Age for Java</TD>
		<TD CLASS="listCell">IBM</TD>
		<TD CLASS="listCell">11/09/2000</TD>
	</TR
	<TR>
		<TD CLASS="listCell">Adaptive Server Anywhere</TD>
		<TD CLASS="listCell">Sybase</TD>
		<TD CLASS="listCell">03/17/2000</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">PcAnywhere</TD>
		<TD CLASS="listCell">Symantec</TD>
		<TD CLASS="listCell">04/01/2001</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">StarOffice 5.1</TD>
		<TD CLASS="listCell">Sun Microsystems</TD>
		<TD CLASS="listCell">10/01/2001</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">Oracle8i</TD>
		<TD CLASS="listCell">Oracle</TD>
		<TD CLASS="listCell">07/28/2000</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">Vertical portal system</TD>
		<TD CLASS="listCell">Cleverlance</TD>
		<TD CLASS="listCell">01/01/2001</TD>
	</TR>
	</TBODY>
	</TABLE>
<BR><BR>
	<TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0 WIDTH=100%>
	<TBODY>
	<TR>
		<TD ALIGN=CENTER CLASS="listCellHead" onmouseover="changeEl(this, 1)" onmouseout="changeEl(this, 2)" onmousedown="clickHead(this, 0);" onmouseup="clickHead(this, 1);" onclick="_tabSort(this);"><B>First name</B></TD>
		<TD ALIGN=CENTER CLASS="listCellHead" onmouseover="changeEl(this, 1)" onmouseout="changeEl(this, 2)" onmousedown="clickHead(this, 0);" onmouseup="clickHead(this, 1);" onclick="_tabSort(this);"><B>ID number</B></TD>
		<TD ALIGN=CENTER CLASS="listCellHead" onmouseover="changeEl(this, 1)" onmouseout="changeEl(this, 2)" onmousedown="clickHead(this, 0);" onmouseup="clickHead(this, 1);" onclick="_tabSort(this);"><B>Last name</B></TD>
	</TR>
	<TR>
		<TD CLASS="listCell">John</TD>
		<TD CLASS="listCell">1</TD>
		<TD CLASS="listCell">Rambo</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">Peter</TD>
		<TD CLASS="listCell">2</TD>
		<TD CLASS="listCell">Bishop</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">Bruce</TD>
		<TD CLASS="listCell">3</TD>
		<TD CLASS="listCell">Eckel</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">Dobra</TD>
		<TD CLASS="listCell">4</TD>
		<TD CLASS="listCell">Podperusa</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">Martin</TD>
		<TD CLASS="listCell">5</TD>
		<TD CLASS="listCell">Krajnik</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">Lukas</TD>
		<TD CLASS="listCell">6</TD>
		<TD CLASS="listCell">Marek</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">Jan</TD>
		<TD CLASS="listCell">7</TD>
		<TD CLASS="listCell">Seda</TD>
	</TR>
	<TR>
		<TD CLASS="listCell">Vit</TD>
		<TD CLASS="listCell">8</TD>
		<TD CLASS="listCell">Cervinka</TD>
	</TR>
	</TBODY>
	</TABLE>
	<a href="http://www.cleverlance.com"><h6>Copyright by Cleverlance 2001<h6></a>
	<BR>
	<i>Special permission was given by www.cleverlance.com to use this script on this site</i>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *