Solved

need second pair of eyes

Posted on 2004-08-23
12
394 Views
Last Modified: 2010-04-06
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
Comment
Question by:imaw
  • 4
  • 3
  • 2
  • +2
12 Comments
 
LVL 33

Expert Comment

by:sajuks
ID: 11877993
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
 
LVL 33

Expert Comment

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

Author Comment

by:imaw
ID: 11883686
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
 
LVL 15

Expert Comment

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

Author Comment

by:imaw
ID: 11884254
I guess so. I should put that in <td></td>
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11884358
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 1

Accepted Solution

by:
puca01 earned 500 total points
ID: 11884428
remove <td colspan='10'><hr color='#1874CD'></td> and it will work!
0
 

Author Comment

by:imaw
ID: 11884937
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
 
LVL 1

Expert Comment

by:puca01
ID: 11885018
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
 
LVL 15

Expert Comment

by:joeposter649
ID: 11885051
"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
 
LVL 1

Expert Comment

by:puca01
ID: 11885090
<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
 
LVL 1

Expert Comment

by:puca01
ID: 11888203
thanks for the A imaw
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now