<!-- TWO STEPS TO INSTALL SORT DATA TABLE:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function setDataType(cValue)
{
// THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY
// SORTING WHEN IN THE SORT FUNCTION
var isDate = new Date(cValue);
if (isDate == "NaN")
{
if (isNaN(cValue))
{
// THE VALUE IS A STRING, MAKE ALL CHARACTERS IN
// STRING UPPER CASE TO ASSURE PROPER A-Z SORT
cValue = cValue.toUpperCase();
return cValue;
}
else
{
// VALUE IS A NUMBER, TO PREVENT STRING SORTING OF A NUMBER
// ADD AN ADDITIONAL DIGIT THAT IS THE + TO THE LENGTH OF
// THE NUMBER WHEN IT IS A STRING
var myNum;
myNum = String.fromCharCode(48 + cValue.length) + cValue;
return myNum;
}
}
else
{
// VALUE TO SORT IS A DATE, REMOVE ALL OF THE PUNCTUATION AND
// AND RETURN THE STRING NUMBER
//BUG - STRING AND NOT NUMERICAL SORT .....
// ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5 etc.)
var myDate = new String();
myDate = isDate.getFullYear() + " " ;
myDate = myDate + isDate.getMonth() + " ";
myDate = myDate + isDate.getDate(); + " ";
myDate = myDate + isDate.getHours(); + " ";
myDate = myDate + isDate.getMinutes(); + " ";
myDate = myDate + isDate.getSeconds();
//myDate = String.fromCharCode(48 + myDate.length) + myDate;
return myDate ;
}
}
function sortTable(col, tableToSort)
{
var iCurCell = col + tableToSort.cols;
var totalRows = tableToSort.rows.length;
var bSort = 0;
var colArray = new Array();
var oldIndex = new Array();
var indexArray = new Array();
var bArray = new Array();
var newRow;
var newCell;
var i;
var c;
var j;
// ** POPULATE THE ARRAY colArray WITH CONTENTS OF THE COLUMN SELECTED
for (i=1; i < tableToSort.rows.length; i++)
{
colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText);
iCurCell = iCurCell + tableToSort.cols;
}
// ** COPY ARRAY FOR COMPARISON AFTER SORT
for (i=0; i < colArray.length; i++)
{
bArray[i] = colArray[i];
}
// ** SORT THE COLUMN ITEMS
//alert ( colArray );
colArray.sort();
//alert ( colArray );
for (i=0; i < colArray.length; i++)
{ // LOOP THROUGH THE NEW SORTED ARRAY
indexArray[i] = (i+1);
for(j=0; j < bArray.length; j++)
{ // LOOP THROUGH THE OLD ARRAY
if (colArray[i] == bArray[j])
{ // WHEN THE ITEM IN THE OLD AND NEW MATCH, PLACE THE
// CURRENT ROW NUMBER IN THE PROPER POSITION IN THE
// NEW ORDER ARRAY SO ROWS CAN BE MOVED ....
// MAKE SURE CURRENT ROW NUMBER IS NOT ALREADY IN THE
// NEW ORDER ARRAY
for (c=0; c<i; c++)
{
if ( oldIndex[c] == (j+1) )
{
bSort = 1;
}
}
if (bSort == 0)
{
oldIndex[i] = (j+1);
}
bSort = 0;
}
}
}
// ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE ....
for (i=0; i<oldIndex.length; i++)
{
newRow = tableToSort.insertRow();
for (c=0; c<tableToSort.cols; c++)
{
newCell = newRow.insertCell();
newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML;
}
}
//MOVE NEW ROWS TO TOP OF TABLE ....
for (i=1; i<totalRows; i++)
{
tableToSort.moveRow((tableToSort.rows.length -1),1);
}
//DELETE THE OLD ROWS FROM THE BOTTOM OF THE TABLE ....
for (i=1; i<totalRows; i++)
{
tableToSort.deleteRow();
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<TABLE WIDTH="75%" BORDER=1 CELLSPACING=1 CELLPADDING=1 name="rsTable" id=rsTable cols=5>
<TR bgcolor=mediumblue>
<TD><A href="javascript:sortTable(0, rsTable);"><FONT color=white><B>ID</FONT></B></A></TD>
<TD><A href="javascript:sortTable(1, rsTable);"><FONT color=white><B>NAME</FONT></B></A></TD>
<TD><A href="javascript:sortTable(2, rsTable);"><FONT color=white><B>DATE</FONT></B></A></TD>
<TD><A href="javascript:sortTable(3, rsTable);"><FONT color=white><B>PHONE</FONT></B></A></TD>
<TD><A href="javascript:sortTable(4, rsTable);"><FONT color=white><B>WORKFLOW</FONT></B></A></TD>
</TR></FONT>
<TR>
<TD>1</TD>
<TD>Andy Berry</TD>
<TD>4/9/72</TD>
<TD>763-555-1212</TD>
<TD>REVIEW</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Dan Developer</TD>
<TD>9/3/63</TD>
<TD>215-555-1400</TD>
<TD>SAME</TD>
</TR>
<TR>
<TD>3</TD>
<TD>John Javascript</TD>
<TD>3/4/71</TD>
<TD>612-555-0987</TD>
<TD>REVIEW</TD>
</TR>
<TR>
<TD>4</TD>
<TD>Jerry JSPage</TD>
<TD>8/2/71</TD>
<TD>215-555-7654</TD>
<TD>SAME</TD>
</TR>
<TR>
<TD>5</TD>
<TD>Mary Mainframe</TD>
<TD>3/28/70</TD>
<TD>763-555-8295</TD>
<TD>REVIEW</TD>
</TR>
<TR>
<TD>6</TD>
<TD>Elaine Ecommerce</TD>
<TD>2/28/29</TD>
<TD>612-555-1338</TD>
<TD>REVIEW</TD>
</TR>
<TR>
<TD>7</TD>
<TD>John Smith</TD>
<TD>12/31/00</TD>
<TD>610-555-0987</TD>
<TD>SAME</TD>
</TR>
<TR>
<TD>8</TD>
<TD>Candy Coder</TD>
<TD>4/1/70</TD>
<TD>000-555-9099</TD>
<TD>SAME</TD>
</TR>
<TR>
<TD>9</TD>
<TD>Pippy Long Stocking</TD>
<TD>1/1/30</TD>
<TD>613-555-1338</TD>
<TD>DIFFERENT</TD>
</TR>
<TR>
<TD>10</TD>
<TD>111222</TD>
<TD>2/2/01</TD>
<TD>345-555-7654</TD>
<TD>DIFFERENT</TD>
</TR>
<TR>
<TD>11</TD>
<TD>Apple Man</TD>
<TD>3/13/74</TD>
<TD>215-555-4043</TD>
<TD>DIFFERENT</TD>
</TR>
</TABLE>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 7.51 KB -->
posted on 2006-08-09 17:35
梦源 阅读(1132)
评论(2) 编辑 收藏