Solved

need second pair of eyes

Posted on 2004-08-23
12
405 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logiā€¦
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

831 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