Solved

need second pair of eyes

Posted on 2004-08-23
12
404 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to I "stripe" columns using XSLT 3 48
PHP parse error 7 60
PHP PDO get the error if exists 3 89
How to silent print from safari browser 6 202
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

832 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