<!-- 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=" JavaScript Source</a></font>
</center><p>
<!-- Script Size:? 7.51 KB -->
posted on 2006-08-09 17:35
夢源 閱讀(1149)
評論(2) 編輯 收藏