# need second pair of eyes

I was trying to use this script:
http://javascript.internet.com/forms/sort-data-table.html#source

it works with the supplied table they have but not mine.
I have an example table in there but it is comment out because
i was trying to make my table work.
It doesn't look like there's many changes that needs to made
but i must be missing somthing.
can someone compare and see what i'm missing?
I am curious about the cols=5 but i change mine to cols=7
since i have 7 column.I don't know what gives.
here's the code i have:
*****************************

<html>
<title>phone main test two version 1</title>

<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
colArray.sort();
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>

<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>

<?
\$connectionstring = odbc_connect("phone", "", "");

\$Query = "select Bay, Slot, Circuit, Extension, Name, SetType, Comments from AllStnSet";
\$queryexe = odbc_do(\$connectionstring, \$Query);
?>
<h1 align="left"><b>&nbsp;&nbsp;PHONE USER INFORMATION</b></h1>
</P>
<TABLE width="100%" align="center" border="0" name="rsTable" id=rsTable cols=7 CELLSPACING=0 CELLPADDING=5>
<TR align="center">
<TD><A href="javascript:sortTable(0, rsTable);"><B>BAY</B></A></TD>
<TD><A href="javascript:sortTable(1, rsTable);"><B>SLOT</B></A></TD>
<TD><A href="javascript:sortTable(2, rsTable);"><B>CIRCUIT</B></A></TD>
<TD><A href="javascript:sortTable(3, rsTable);"><B>EXTENSION</B></A></TD>
<TD><A href="javascript:sortTable(4, rsTable);"><B>NAME</B></A></TD>
<TD><A href="javascript:sortTable(5, rsTable);"><B>PHONE TYPE</B></A></TD>
</TR>
<tr>
<td><hr color='#1874CD'></td><td><hr color='#1874CD'></td>
<td><hr color='#1874CD'></td><td><hr color='#1874CD'></td>
<td><hr color='#1874CD'></td><td><hr color='#1874CD'></td>
<td><hr color='#1874CD'></td>
</tr>

<?

//print(\$Query);
\$rs = new ODBCRecordset(\$connectionstring,\$Query);
for (\$i=1;\$i<=\$rs->rowCount;\$i++)
{
print("<tr>");
print("<TD align='center' NOWRAP>" . \$rs->fields[\$i]['Bay'] . "</TD>\n");
print("<TD align='center' NOWRAP>" . \$rs->fields[\$i]['Slot'] . "</TD>\n");
print("<TD align='center' NOWRAP>" . \$rs->fields[\$i]['Circuit'] . "</TD>\n");
print("<TD align='center' NOWRAP>" . \$rs->fields[\$i]['Extension'] . "</TD>\n");
print("<TD align='center' NOWRAP>" . \$rs->fields[\$i]['Name'] . "</TD>\n");
print("<TD align='center' NOWRAP>" . \$rs->fields[\$i]['SetType'] . "</TD>\n");
print("<TD align='center' NOWRAP>" . \$rs->fields[\$i]['Comments'] . "</TD>\n");
print("</TR>\n");
}
?>
<td colspan='10'><hr color='#1874CD'></td>
</table>
<p>
</p>
<?
require ("includes/footer.html");
?>
</body>
</html>
###### Who is Participating?

Commented:
remove <td colspan='10'><hr color='#1874CD'></td> and it will work!
0

Commented:
You have named both the tables with same name and id (rsTable)
<TABLE width="100%" align="center" border="0" name="rsTable" id="rsTable" cols=7 CELLSPACING=0>

change it
<TABLE width="100%" align="center" border="0" name="rsTable1" id="rsTable1" cols=7 CELLSPACING=0>

0

Commented:
Since you dont need the supplied sample, change the name and id of the commented table or better still just delete it.
0

Author Commented:
I don't need the supplied table and I did delete that and that is why i'm confuse if i miss something. I put that there for u guys to see. Hopefully i can find what i'm missing.
0

Commented:
Is your last <td> outside a <tr>?
<td colspan='10'><hr color='#1874CD'></td>
0

Author Commented:
I guess so. I should put that in <td></td>
0

Commented:
That code looks a bit bloated - I cleaned it up a bit, give this a shot.  All you have to do is provide the right id in the init function for the table that you want to sort, and add the onclick handlers to the top rows, as before.  Hope that helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<script type="text/javascript">
function init()
{
var obj = document.getElementById("tblToSort");
toggleArr = new Array();
for (var i = 0; i < obj.cols; i ++)
toggleArr[i] = false;
}

function sortTable(obj, col)
{
var tbl = obj;
while (tbl.tagName.toLowerCase() != "table")
tbl = tbl.parentNode;
var tbody = tbl.getElementsByTagName("tbody")[0];

var arr = new Array();
for (var i = 1; i < tbl.rows.length; i ++)
arr[arr.length] = tbl.rows[i].cells[col].innerHTML;

if (toggleArr[col])
arr.sort(reverseSort);
else
arr.sort(mySort);
toggleArr[col] = !toggleArr[col];

var str = "";
for (var j = 0; j < arr.length; j ++)
str += "\n" + arr[j];

for (var i = 0; i < arr.length; i ++)
{
if (arr[i] == tbl.rows[i+1].cells[col].innerHTML)
continue;
else
{
var ctr = i + 1;
while (tbl.rows[ctr].cells[col].innerHTML != arr[i])
ctr ++;
var rowToSwitch = tbl.rows[ctr];
var temp = tbl.rows[i+1];
tbody.replaceChild(rowToSwitch, temp);
tbody.appendChild(temp);
}
}
}

function mySort(a, b)
{
var aTest = a;
var bTest = b;
var testDateA = new Date(a); // used to test for date types
if (!isNaN(a) && !isNaN(b))
{
aTest = parseInt(a);
bTest = parseInt(b);
}
else if (testDateA != "NaN" && testDateA != "Invalid Date")
{
aTest = testDateA.getTime();
bTest = new Date(b).getTime();
}

if (aTest > bTest)
return 1;
if (aTest < bTest)
return -1;
else
return 0;
}

function reverseSort(a, b)
{
var aTest = a;
var bTest = b;
var testDateA = new Date(a); // used to test for date types
if (!isNaN(a) && !isNaN(b))
{
aTest = parseInt(a);
bTest = parseInt(b);
}
else if (testDateA != "NaN" && testDateA != "Invalid Date")
{
aTest = testDateA.getTime();
bTest = new Date(b).getTime();
}

if (aTest > bTest)
return -1;
if (aTest < bTest)
return 1;
else
return 0;
}
</script>
</style>

<body>
<table id="tblToSort">
<tr>
<th onclick="sortTable(this, 0)">First Name</th>
<th onclick="sortTable(this, 1)">Last Name</th>
<th onclick="sortTable(this, 2)">ID</th>
<th onclick="sortTable(this, 3)">Date</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>1</td>
<td>12/1/1960</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>2</td>
<td>1/2/1960</td>
</tr>
<tr>
<td>Some</td>
<td>Person</td>
<td>3</td>
<td>6/1/1960</td>
</tr>
<tr>
<td>John</td>
<td>Public</td>
<td>4</td>
<td>1/1/1961</td>
</tr>
<tr>
<td>Barry</td>
<td>Bonds</td>
<td>10</td>
<td>1/1/1970</td>
</tr>
<tr>
<td>Albert</td>
<td>Pujols</td>
<td>20</td>
<td>1/2/2005</td>
</tr>
<tr>
<td>Beltre</td>
<td>30</td>
<td>1/1/2003</td>
</tr>
<tr>
<td>Scott</td>
<td>Rolen</td>
<td>40</td>
<td>6/1/2000</td>
</tr>
</table>
</body>
</html>
0

Author Commented:
puca01,
that works but it took 20 seconds to make the changes. I don't know if that's a good idea to use that script. I might have to find a different mechanism. One thing also is my "<tr>
<td><hr color='#1874CD'></td><td><hr color='#1874CD'></td>
<td><hr color='#1874CD'></td><td><hr color='#1874CD'></td>
<td><hr color='#1874CD'></td><td><hr color='#1874CD'></td>
<td><hr color='#1874CD'></td>
</tr>"
move during the sort.
I also wouldnt' mind having the "<td colspan='10'><hr color='#1874CD'></td>" in there.
There is another script that i can use that was use for a different web app but i couldn't read to understand it. If you like i can post it.
-t
0

Commented:
Why don't you want to use it without that colspand td?

I don't really understand what you mean with the moving tr too, explain it :-)
0

Commented:
"One thing also is my "<tr>..move during the sort."
How do you expect them to sort with no values in them?

"I also wouldnt' mind having the "<td colspan='10'><hr color='#1874CD'></td>" in there."
Table details (<td>) must be in table rows(<tr>).
0

Commented:
<td colspan='10'><hr color='#1874CD'></td> is not needed at all for structure,
I f you want it for having a colored line you should put it between <tr></tr> like others said before
0

Commented:
thanks for the A imaw
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.