<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test JavaScript Sort Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT>
var allNums = false; // boolean variable to see if whole column is numeric
var allDates = false; // boolean variable to see if column vals are all dates
var lastSort = -1; // variable to hold last column number sorted
var absOrder = true; // boolean to sort in reverse if on same column
//-----------------------------------------------------------------------
function setDataType(inValue) {
// This function checks data type of a value
// - sets allNums to false if a non-number is found
// - sets allDates to false if a non-date is found
var isDate = new Date(inValue);
if (isDate == "NaN") {
if (isNaN(inValue)){
// The value is a string, make all characters in
// String upper case to assure proper a-z sort
inValue = inValue.toUpperCase();
allNums = false
allDates = false
return inValue;
}
else {
// Value is a number, make sure it is not treated as a string
allDates = false
return parseFloat(1*inValue);
}
}
else {
// Value to sort is a date
allNums = false
return inValue ;
}
}
//-----------------------------------------------------------------------
function sortTable(col, inTable){
if (lastSort == col){
// sorting on same column twice = reverse sort order
absOrder ? absOrder = false : absOrder = true
}
else{
absOrder = true
}
lastSort = col
allTR = document.getElementById(inTable).childNodes[0].childNodes
// allTR now holds all the rows in the dataTable
totalRows = allTR.length
colToSort = new Array() //holds all the cells in the column to sort
colArr = new Array() //holds all the rows that correspond to the sort cell
copyArr = new Array() //holds an original copy of the sort data to match to colArr
resultArr = new Array() //holds the output
allNums = true
allDates = true
//store the original data
//remember that the first row - [0] - has column headings
//so start with the second row - [1]
//and load the contents of the cell into the array that will be sorted
for (x=1; x < totalRows; x++){
colToSort[x-1] = setDataType(allTR[x].childNodes[col].innerText)
colArr[x-1] = allTR[x]
}
//make a copy of the original
for (x=0; x<colToSort.length; x++){
copyArr[x] = colToSort[x]
}
//sort the original data based on data type
if (allNums){
colToSort.sort(numberOrder)
}
else if (allDates){
colToSort.sort(dateOrder)
}
else{
colToSort.sort(textOrder)
}
//match copy to sorted
for(x=0; x<colToSort.length; x++){
for(y=0; y<copyArr.length; y++){
if (colToSort[x] == copyArr[y]){
boolListed = false
//searcg the ouput array to make sure not to use duplicate rows
for(z=0; z<resultArr.length; z++){
if (resultArr[z]==y){
boolListed = true
break;
}
}
if (!boolListed){
resultArr[x] = y
break;
}
}
}
}
//now display the results - it is as simple as swapping rows
for (x=0; x<resultArr.length; x++){
allTR[x+1].swapNode(colArr[resultArr[x]])
}
}
//-----------------------------------------------------------------------
function numberOrder(a,b){
absOrder ? rVal = b - a : rVal = a - b
return rVal
}
//-----------------------------------------------------------------------
function dateOrder(a,b){
absOrder ? rVal = Date.parse(a) - Date.parse(b) : rVal = Date.parse(b) - Date.parse(a)
return rVal
}
//-----------------------------------------------------------------------
function textOrder(a,b){
if (a.toString() < b.toString()){
absOrder ? rVal = -1 : rVal = 1
}
else{
absOrder ? rVal = 1 : rVal = -1
}
return rVal
}
[blue]function numberSort(col, inTable){
if (lastSort == col){
// sorting on same column twice = reverse sort order
absOrder ? absOrder = false : absOrder = true
}
else{
absOrder = true
}
lastSort = col
allTR = document.getElementById(inTable).childNodes[0].childNodes
// allTR now holds all the rows in the dataTable
totalRows = allTR.length
colToSort = new Array() //holds all the cells in the column to sort
colArr = new Array() //holds all the rows that correspond to the sort cell
copyArr = new Array() //holds an original copy of the sort data to match to colArr
resultArr = new Array() //holds the output
//store the original data
//remember that the first row - [0] - has column headings
//so start with the second row - [1]
//and load the contents of the cell into the array that will be sorted
for (x=1; x < totalRows; x++){
colToSort[x-1] = findFirstNumber(allTR[x].childNodes[col].innerText)
colArr[x-1] = allTR[x]
}
//make a copy of the original
for (x=0; x<colToSort.length; x++){
copyArr[x] = colToSort[x]
}
colToSort.sort(numberOrder)
//match copy to sorted
for(x=0; x<colToSort.length; x++){
for(y=0; y<copyArr.length; y++){
if (colToSort[x] == findFirstNumber(copyArr[y])){
boolListed = false
//search the ouput array to make sure not to use duplicate rows
for(z=0; z<resultArr.length; z++){
if (resultArr[z]==y){
boolListed = true
break;
}
}
if (!boolListed){
resultArr[x] = y
break;
}
}
}
}
//now display the results - it is as simple as swapping rows
for (x=0; x<resultArr.length; x++){
allTR[x+1].swapNode(colArr[resultArr[x]])
}
}
function findFirstNumber(inVal){
numFound = ""
for (n=0; n<inVal.length; n++){
thisChar = parseInt(inVal.substr(n,1))
if (!isNaN(thisChar)){
numFound = numFound + thisChar
}
else{
if (numFound != "") n = inVal.length
}
}
if (numFound == "") numFound = 0
return numFound
}[/blue]
</SCRIPT>
<style>
table {
border: none;
margin: 0 auto;
background-color: #990000;
text-align: center;
}
tr {
background-color: #FFFF66;
font-family: "Times New Roman", Times, serif; font-size: 18px;
}
th,td {
margin: 4px;
padding: 4px;
}
th,td {
white-space: nowrap;
}
</style>
</head>
<body bgcolor="#990000">
<div align="center"><font size="5" color="#FFFFFF">Selft Catering Accommodation
</font></div>
<table id="dataTable1" align="center">
<tr>
<th><a href="javascript: sortTable(0, 'dataTable1')">Town/City</a></th>
<th><a href="javascript: sortTable(1, 'dataTable1')">Name</a></th>
<th><a href="javascript: sortTable(2, 'dataTable1')">Property Type</a></th>
<th><a href="javascript: [blue]numberSort[/blue](3, 'dataTable1')">Weekly Rates From (£)</a></th>
<th><a href="javascript: sortTable(4, 'dataTable1')">Rooms</a></th>
</tr>
<tr>
<td>AAA</td>
<td>A Property</td>
<td>Cottage</td>
<td>195.00</td>
<td>1</td>
</tr>
<tr>
<td>GGG</td>
<td>B Property</td>
<td>Apartment</td>
<td>150.00</td>
<td>2</td>
</tr>
<tr>
<td>BBB</td>
<td>C Property</td>
<td>Campsite</td>
<td>95.00</td>
<td>3</td>
</tr>
<tr>
<td>CCC</td>
<td>D Property</td>
<td>Caravan Site</td>
<td>-</td>
<td>4</td>
</tr>
<tr>
<td>DDD</td>
<td>E Property</td>
<td>Cottages</td>
<td>100.00</td>
<td>5</td>
</tr>
</table>
<p align="center"> </p>
<p align="center"><font size="5" color="#FFFFFF">Serviced Accommodation</font>
<table id="dataTable2" align="center">
<tr>
<th><a href="javascript: sortTable(0, 'dataTable2')">Town/City</a></th>
<th><a href="javascript: sortTable(1, 'dataTable2')">Name</a></th>
<th><a href="javascript: sortTable(2, 'dataTable2')">Property Type</a></th>
<th><a href="javascript: [blue]numberSort[/blue](3, 'dataTable2')">Room Rates(£)</a></th>
<th><a href="javascript: sortTable(4, 'dataTable2')">Rooms</a></th>
</tr>
<tr>
<td>AAA</td>
<td>A Property</td>
<td>B&B</td>
<td>195.00+</td>
<td>1</td>
</tr>
<tr>
<td>GGG</td>
<td>B Property</td>
<td>Guest House</td>
<td>From 80.00</td>
<td>2</td>
</tr>
<tr>
<td>BBB</td>
<td>C Property</td>
<td>Hotel</td>
<td>95.00</td>
<td>3</td>
</tr>
<tr>
<td>CCC</td>
<td>D Property</td>
<td>Hotel</td>
<td>-</td>
<td>4</td>
</tr>
<tr>
<td>DDD</td>
<td>E Property</td>
<td>B&B</td>
<td>25.00+ PPPN</td>
<td>5</td>
</tr>
</table>
<p> </p>
</body>
</html>
