• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 427
  • Last Modified:

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>
<head>
<title>phone main test two version 1</title>
<link rel="stylesheet" type="text/css" href="includes/phone.style.css" />

<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>
<body link="1874CD" alink="1874CD" vlink="1874CD">

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



<?
  require("includes/header.php");
  $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>
          <TD><A href="javascript:sortTable(6, rsTable);"><B>COMMENTS</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>
                            <a href="javascript:scroll(0,0)">Back to top</a>
                        </p>
<?
   require ("includes/footer.html");
?>                        
</body>
</html>
0
imaw
Asked:
imaw
  • 4
  • 3
  • 2
  • +2
1 Solution
 
sajuksCommented:
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
 
sajuksCommented:
Since you dont need the supplied sample, change the name and id of the commented table or better still just delete it.
0
 
imawAuthor 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
joeposter649Commented:
Is your last <td> outside a <tr>?
       <td colspan='10'><hr color='#1874CD'></td>
0
 
imawAuthor Commented:
I guess so. I should put that in <td></td>
0
 
dakydCommented:
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>
<head>
<script type="text/javascript">
window.onload = init;
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>
</head>

<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>Adrian</td>
    <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
 
puca01Commented:
remove <td colspan='10'><hr color='#1874CD'></td> and it will work!
0
 
imawAuthor 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
 
puca01Commented:
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
 
joeposter649Commented:
"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
 
puca01Commented:
<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
 
puca01Commented:
thanks for the A imaw
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now