Back To Programming / Scripting / Coding Forum

Form Table with data

  • vickriz
  • Novice
  • Novice
  • User avatar
  • Joined: Jul 28, 2003
  • Posts: 31
  • Loc: Phlippines
  • Status: Offline

Post July 28th, 2003, 7:59 pm

Hello folks i found this JavaScript code which sort table. its working on their demo page. but when i use it on my own and click the table header it occurs "error on page" at my window.status :cry:
anybody want to help?? :?:
here's the whole code..

Code: [ Select ]
JavaScript:
<!-- Begin Demo: Sorting data from table
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 -->

HTML:

<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</b></font></a></td>
    <td><a href="javascript:sorttable(1, rstable);"><font color=white><b>NAME</b></font></a></td>
    <td><a href="javascript:sorttable(2, rstable);"><font color=white><b>DATE</b></font></a></td>
    <td><a href="javascript:sorttable(3, rstable);"><font color=white><b>PHONE</b></font></a></td>
    <td><a href="javascript:sorttable(4, rstable);"><font color=white><b>WORKFLOW</b></font></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>
  1. JavaScript:
  2. <!-- Begin Demo: Sorting data from table
  3. function setdataType(cValue)
  4.  {
  5.   // THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY
  6.   // SORTING WHEN IN THE SORT FUNCTION
  7.   var isDate = new Date(cValue);
  8.   if (isDate == "NaN")
  9.    {
  10.     if (isNaN(cValue))
  11.      {
  12.       // THE VALUE IS A StrING, MAKE ALL CHARACTERS IN
  13.       // StrING UPPER CASE TO ASSURE PROPER A-Z SORT
  14.       cValue = cValue.toUpperCase();
  15.       return cValue;
  16.      }
  17.     else
  18.      {
  19.       // VALUE IS A NUMBER, TO PREVENT StrING SORTING OF A NUMBER
  20.       // ADD AN ADDITIONAL DIGIT THAT IS THE + TO THE LENGTH OF
  21.       // THE NUMBER WHEN IT IS A StrING
  22.       var myNum;
  23.       myNum = String.fromCharCode(48 + cValue.length) + cValue;
  24.       return myNum;
  25.      }
  26.     }
  27.  else
  28.    {
  29.     // VALUE TO SORT IS A DATE, REMOVE ALL OF THE PUNCTUATION AND
  30.     // AND RETURN THE StrING NUMBER
  31.     //BUG - StrING AND NOT NUMERICAL SORT .....
  32.     // ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5 etc.)
  33.     var myDate = new String();
  34.     myDate = isDate.getFullYear() + " " ;
  35.     myDate = myDate + isDate.getMonth() + " ";
  36.     myDate = myDate + isDate.getdate(); + " ";
  37.     myDate = myDate + isDate.getHours(); + " ";
  38.     myDate = myDate + isDate.getMinutes(); + " ";
  39.     myDate = myDate + isDate.getSeconds();
  40.     //myDate = String.fromCharCode(48 + myDate.length) + myDate;
  41.     return myDate ;
  42.    }
  43.  }
  44. function sorttable(col, tableToSort)
  45.  {
  46.   var iCurCell = col + tableToSort.cols;
  47.   var totalRows = tableToSort.rows.length;
  48.   var bSort = 0;
  49.   var colArray = new Array();
  50.   var oldIndex = new Array();
  51.   var indexArray = new Array();
  52.   var bArray = new Array();
  53.   var newRow;
  54.   var newCell;
  55.   var i;
  56.   var c;
  57.   var j;
  58.   // ** POPULATE THE ARRAY colArray WITH CONTENTS OF THE COLUMN SELECTED
  59.   for (i=1; i < tableToSort.rows.length; i++)
  60.    {
  61.     colArray[i - 1] = setdataType(tableToSort.cells(iCurCell).innerText);
  62.     iCurCell = iCurCell + tableToSort.cols;
  63.    }
  64.   // ** COPY ARRAY FOR COMPARISON AFTER SORT
  65.   for (i=0; i < colArray.length; i++)
  66.    {
  67.     bArray[i] = colArray[i];
  68.    }
  69.   // ** SORT THE COLUMN ITEMS
  70.   //alert ( colArray );
  71.   colArray.sort();
  72.   //alert ( colArray );
  73.   for (i=0; i < colArray.length; i++)
  74.    { // LOOP THROUGH THE NEW SORTED ARRAY
  75.     indexArray[i] = (i+1);
  76.     for(j=0; j < bArray.length; j++)
  77.      { // LOOP THROUGH THE OLD ARRAY
  78.       if (colArray[i] == bArray[j])
  79.        { // WHEN THE ITEM IN THE OLD AND NEW MATCH, PLACE THE
  80.         // CURRENT ROW NUMBER IN THE PROPER POSITION IN THE
  81.         // NEW ORDER ARRAY SO ROWS CAN BE MOVED ....
  82.         // MAKE SURE CURRENT ROW NUMBER IS NOT ALREADY IN THE
  83.         // NEW ORDER ARRAY
  84.         for (c=0; c<i; c++)
  85.          {
  86.           if ( oldIndex[c] == (j+1) )
  87.           {
  88.            bSort = 1;
  89.           }
  90.            }
  91.            if (bSort == 0)
  92.             {
  93.              oldIndex[i] = (j+1);
  94.             }
  95.              bSort = 0;
  96.             }
  97.      }
  98.   }
  99.  // ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF table ....
  100.  for (i=0; i<oldIndex.length; i++)
  101.   {
  102.    newRow = tableToSort.insertrow();
  103.    for (c=0; c<tableToSort.cols; c++)
  104.     {
  105.      newCell = newRow.insertCell();
  106.      newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML;
  107.     }
  108.    }
  109.  //MOVE NEW ROWS TO TOP OF table ....
  110.  for (i=1; i<totalRows; i++)
  111.   {
  112.    tableToSort.moveRow((tableToSort.rows.length -1),1);
  113.   }
  114.  //DELETE THE OLD ROWS FROM THE BOTTOM OF THE table ....
  115.  for (i=1; i<totalRows; i++)
  116.   {
  117.    tableToSort.deleteRow();
  118.   }
  119.  }
  120. // End -->
  122. HTML:
  124. <table width="75%" border=1 cellspacing="1" cellpadding="1" name="rstable" id=rstable cols=5>
  125.   <tr bgcolor=mediumblue>
  126.     <td><a href="javascript:sorttable(0, rstable);"><font color=white><b>ID</b></font></a></td>
  127.     <td><a href="javascript:sorttable(1, rstable);"><font color=white><b>NAME</b></font></a></td>
  128.     <td><a href="javascript:sorttable(2, rstable);"><font color=white><b>DATE</b></font></a></td>
  129.     <td><a href="javascript:sorttable(3, rstable);"><font color=white><b>PHONE</b></font></a></td>
  130.     <td><a href="javascript:sorttable(4, rstable);"><font color=white><b>WORKFLOW</b></font></a></td>
  131.   </tr></font>
  132.   <tr>
  133.     <td>1</td>  <td>Andy Berry</td>  <td>4/9/72</td>  <td>763-555-1212</td> <td>REVIEW</td>
  134.   </tr>
  135.   <tr>
  136.     <td>2</td>  <td>Dan Developer</td>  <td>9/3/63</td>  <td>215-555-1400</td> <td>SAME</td>
  137.   </tr>
  138.   <tr>
  139.     <td>3</td>  <td>John Javascript</td> <td>3/4/71</td> <td>612-555-0987</td> <td>REVIEW</td>
  140.   </tr>
  141.   <tr>
  142.     <td>4</td> <td>Jerry JSPage</td> <td>8/2/71</td> <td>215-555-7654</td> <td>SAME</td>
  143.   </tr>
  144.   <tr>
  145.     <td>5</td> <td>Mary Mainframe</td> <td>3/28/70</td> <td>763-555-8295</td> <td>REVIEW</td>
  146.   </tr>
  147.   <tr>
  148.     <td>6</td> <td>Elaine Ecommerce</td> <td>2/28/29</td> <td>612-555-1338</td> <td>REVIEW</td>
  149.   </tr>
  150.   <tr>
  151.     <td>7</td> <td>John Smith</td> <td>12/31/00</td> <td>610-555-0987</td> <td>SAME</td>
  152.   </tr>
  153.   <tr>
  154.     <td>8</td> <td>Candy Coder</td> <td>4/1/70</td> <td>000-555-9099</td> <td>SAME</td>
  155.   </tr>
  156.     <tr>
  157.     <td>9</td> <td>Pippy Long Stocking</td> <td>1/1/30</td> <td>613-555-1338</td> <td>DIFFERENT</td>
  158.   </tr>
  159.   <tr>
  160.     <td>10</td> <td>111222</td> <td>2/2/01</td> <td>345-555-7654</td> <td>DIFFERENT</td>
  161.   </tr>
  162.   <tr>
  163.     <td>11</td> <td>Apple Man</td> <td>3/13/74</td> <td>215-555-4043</td> <td>DIFFERENT</td>
  164.   </tr>
  165. </table>
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 28th, 2003, 7:59 pm

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23407
  • Loc: Woodbridge VA
  • Status: Offline

Post July 28th, 2003, 9:08 pm

Where did you place the JavaScript? Within the "head" tags?
Second question would be, did you add the "onLoad" to the body tags?
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • vickriz
  • Novice
  • Novice
  • User avatar
  • Joined: Jul 28, 2003
  • Posts: 31
  • Loc: Phlippines
  • Status: Offline

Post July 28th, 2003, 9:22 pm

ATNO/TW wrote:
Where did you place the JavaScript? Within the "head" tags?
Second question would be, did you add the "onLoad" to the body tags?


i put the javascript within the head tags..

forgive me for being naive. but i dont know what/which function to put inside the <body onload="?">..
:oops:
can you please help me out? please please please :(
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23407
  • Loc: Woodbridge VA
  • Status: Offline

Post July 28th, 2003, 10:25 pm

but if I'm reading correctly I think it should be : onload="setdataType();"

Someone correct me if I'm wrong.. it's a little late here on my end.

If all else fails and no one else answers, check the source code for the script that works. Review the body tag and that "should" give you your exact answer.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • vickriz
  • Novice
  • Novice
  • User avatar
  • Joined: Jul 28, 2003
  • Posts: 31
  • Loc: Phlippines
  • Status: Offline

Post July 30th, 2003, 12:45 am

ATNO/TW wrote:
but if I'm reading correctly I think it should be : onload="setdataType();"

Someone correct me if I'm wrong.. it's a little late here on my end.

If all else fails and no one else answers, check the source code for the script that works. Review the body tag and that "should" give you your exact answer.


i put the script inside head tags and put the onload on body tag like you suggest.
still occuring the same error at window.status. "Error on page"
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post July 30th, 2003, 3:28 am

Are there instructions to follow that explains exactly what steps you need to take in order to use it? It seems like you might be missing something.

Before you did what ATNO/TW suggested, what errors were you receiving? I am not sure what ATNO/TW suggested would work because the function setdataType() is expecting an argument.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • vickriz
  • Novice
  • Novice
  • User avatar
  • Joined: Jul 28, 2003
  • Posts: 31
  • Loc: Phlippines
  • Status: Offline

Post July 30th, 2003, 3:47 am

Bigwebmaster wrote:
Are there instructions to follow that explains exactly what steps you need to take in order to use it? It seems like you might be missing something.

Before you did what ATNO/TW suggested, what errors were you receiving? I am not sure what ATNO/TW suggested would work because the function setdataType() is expecting an argument.


the only error i received was "Error on page" [with the icon of exclamation on top of paper] at my window.status which occur when i click on header of the table.

can you help me out with this?? please :oops:
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post July 30th, 2003, 3:59 am

Where does it say "Error on Page"? Does it say it in the bottom part of the browser status area? If it does double click on it to get more specifics.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post July 30th, 2003, 7:35 am

I'm getting "object doesn't support this property or method" in both of the functions depending on which header row I click when I use the first example posted, so I think that the code was probably accidentally corrupted when cutting and pasting originally. I couldn't see the difference when I tried to compare it to the original script at The Javascript Source, but it's a relatively complicated script, so I would just recommend starting over by copying it again. I was able to get the original script working after copying and pasting it from The Javascript Source. Here is the file that I used if you just want to copy that:

Code: [ Select ]

<HEAD>

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

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

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


<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 7.51 KB -->
  2. <HEAD>
  4. <SCRIPT LANGUAGE="JavaScript">
  6. <!-- This script and many more are available free online at -->
  7. <!-- The JavaScript Source!! http://javascript.internet.com -->
  9. <!-- Begin
  10. function setDataType(cValue)
  11.  {
  12.   // THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY
  13.   // SORTING WHEN IN THE SORT FUNCTION
  14.   var isDate = new Date(cValue);
  15.   if (isDate == "NaN")
  16.    {
  17.     if (isNaN(cValue))
  18.      {
  19.       // THE VALUE IS A STRING, MAKE ALL CHARACTERS IN
  20.       // STRING UPPER CASE TO ASSURE PROPER A-Z SORT
  21.       cValue = cValue.toUpperCase();
  22.       return cValue;
  23.      }
  24.     else
  25.      {
  26.       // VALUE IS A NUMBER, TO PREVENT STRING SORTING OF A NUMBER
  27.       // ADD AN ADDITIONAL DIGIT THAT IS THE + TO THE LENGTH OF
  28.       // THE NUMBER WHEN IT IS A STRING
  29.       var myNum;
  30.       myNum = String.fromCharCode(48 + cValue.length) + cValue;
  31.       return myNum;
  32.      }
  33.     }
  34.  else
  35.    {
  36.     // VALUE TO SORT IS A DATE, REMOVE ALL OF THE PUNCTUATION AND
  37.     // AND RETURN THE STRING NUMBER
  38.     //BUG - STRING AND NOT NUMERICAL SORT .....
  39.     // ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5 etc.)
  40.     var myDate = new String();
  41.     myDate = isDate.getFullYear() + " " ;
  42.     myDate = myDate + isDate.getMonth() + " ";
  43.     myDate = myDate + isDate.getDate(); + " ";
  44.     myDate = myDate + isDate.getHours(); + " ";
  45.     myDate = myDate + isDate.getMinutes(); + " ";
  46.     myDate = myDate + isDate.getSeconds();
  47.     //myDate = String.fromCharCode(48 + myDate.length) + myDate;
  48.     return myDate ;
  49.    }
  50.  }
  51. function sortTable(col, tableToSort)
  52.  {
  53.   var iCurCell = col + tableToSort.cols;
  54.   var totalRows = tableToSort.rows.length;
  55.   var bSort = 0;
  56.   var colArray = new Array();
  57.   var oldIndex = new Array();
  58.   var indexArray = new Array();
  59.   var bArray = new Array();
  60.   var newRow;
  61.   var newCell;
  62.   var i;
  63.   var c;
  64.   var j;
  65.   // ** POPULATE THE ARRAY colArray WITH CONTENTS OF THE COLUMN SELECTED
  66.   for (i=1; i < tableToSort.rows.length; i++)
  67.    {
  68.     colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText);
  69.     iCurCell = iCurCell + tableToSort.cols;
  70.    }
  71.   // ** COPY ARRAY FOR COMPARISON AFTER SORT
  72.   for (i=0; i < colArray.length; i++)
  73.    {
  74.     bArray[i] = colArray[i];
  75.    }
  76.   // ** SORT THE COLUMN ITEMS
  77.   //alert ( colArray );
  78.   colArray.sort();
  79.   //alert ( colArray );
  80.   for (i=0; i < colArray.length; i++)
  81.    { // LOOP THROUGH THE NEW SORTED ARRAY
  82.     indexArray[i] = (i+1);
  83.     for(j=0; j < bArray.length; j++)
  84.      { // LOOP THROUGH THE OLD ARRAY
  85.       if (colArray[i] == bArray[j])
  86.        { // WHEN THE ITEM IN THE OLD AND NEW MATCH, PLACE THE
  87.         // CURRENT ROW NUMBER IN THE PROPER POSITION IN THE
  88.         // NEW ORDER ARRAY SO ROWS CAN BE MOVED ....
  89.         // MAKE SURE CURRENT ROW NUMBER IS NOT ALREADY IN THE
  90.         // NEW ORDER ARRAY
  91.         for (c=0; c<i; c++)
  92.          {
  93.           if ( oldIndex[c] == (j+1) )
  94.           {
  95.            bSort = 1;
  96.           }
  97.            }
  98.            if (bSort == 0)
  99.             {
  100.              oldIndex[i] = (j+1);
  101.             }
  102.              bSort = 0;
  103.             }
  104.      }
  105.   }
  106.  // ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE ....
  107.  for (i=0; i<oldIndex.length; i++)
  108.   {
  109.    newRow = tableToSort.insertRow();
  110.    for (c=0; c<tableToSort.cols; c++)
  111.     {
  112.      newCell = newRow.insertCell();
  113.      newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML;
  114.     }
  115.    }
  116.  //MOVE NEW ROWS TO TOP OF TABLE ....
  117.  for (i=1; i<totalRows; i++)
  118.   {
  119.    tableToSort.moveRow((tableToSort.rows.length -1),1);
  120.   }
  121.  //DELETE THE OLD ROWS FROM THE BOTTOM OF THE TABLE ....
  122.  for (i=1; i<totalRows; i++)
  123.   {
  124.    tableToSort.deleteRow();
  125.   }
  126.  }
  127. // End -->
  128. </script>
  130. </HEAD>
  132. <!-- STEP TWO: Copy this code into the BODY of your HTML document -->
  134. <BODY>
  136. <TABLE WIDTH="75%" BORDER=1 CELLSPACING=1 CELLPADDING=1 name="rsTable" id=rsTable cols=5>
  137.     <TR bgcolor=mediumblue>
  138.         <TD><A href="javascript:sortTable(0, rsTable);"><FONT color=white><B>ID</FONT></B></A></TD>
  139.         <TD><A href="javascript:sortTable(1, rsTable);"><FONT color=white><B>NAME</FONT></B></A></TD>
  140.         <TD><A href="javascript:sortTable(2, rsTable);"><FONT color=white><B>DATE</FONT></B></A></TD>
  141.         <TD><A href="javascript:sortTable(3, rsTable);"><FONT color=white><B>PHONE</FONT></B></A></TD>
  142.         <TD><A href="javascript:sortTable(4, rsTable);"><FONT color=white><B>WORKFLOW</FONT></B></A></TD>
  143.     </TR></FONT>
  144.     <TR>
  145.         <TD>1</TD>
  146.         <TD>Andy Berry</TD>
  147.         <TD>4/9/72</TD>
  148.         <TD>763-555-1212</TD>
  149.         <TD>REVIEW</TD>
  150.     </TR>
  151.     <TR>
  152.         <TD>2</TD>
  153.         <TD>Dan Developer</TD>
  154.         <TD>9/3/63</TD>
  155.         <TD>215-555-1400</TD>
  156.         <TD>SAME</TD>
  157.     </TR>
  158.     <TR>
  159.         <TD>3</TD>
  160.         <TD>John Javascript</TD>
  161.         <TD>3/4/71</TD>
  162.         <TD>612-555-0987</TD>
  163.         <TD>REVIEW</TD>
  164.     </TR>
  165.     <TR>
  166.         <TD>4</TD>
  167.         <TD>Jerry JSPage</TD>
  168.         <TD>8/2/71</TD>
  169.         <TD>215-555-7654</TD>
  170.         <TD>SAME</TD>
  171.     </TR>
  172.     <TR>
  173.         <TD>5</TD>
  174.         <TD>Mary Mainframe</TD>
  175.         <TD>3/28/70</TD>
  176.         <TD>763-555-8295</TD>
  177.         <TD>REVIEW</TD>
  178.     </TR>
  179.     <TR>
  180.         <TD>6</TD>
  181.         <TD>Elaine Ecommerce</TD>
  182.         <TD>2/28/29</TD>
  183.         <TD>612-555-1338</TD>
  184.         <TD>REVIEW</TD>
  185.     </TR>
  186.     <TR>
  187.         <TD>7</TD>
  188.         <TD>John Smith</TD>
  189.         <TD>12/31/00</TD>
  190.         <TD>610-555-0987</TD>
  191.         <TD>SAME</TD>
  192.     </TR>
  193.         <TR>
  194.         <TD>8</TD>
  195.         <TD>Candy Coder</TD>
  196.         <TD>4/1/70</TD>
  197.         <TD>000-555-9099</TD>
  198.         <TD>SAME</TD>
  199.     </TR>
  200.         <TR>
  201.         <TD>9</TD>
  202.         <TD>Pippy Long Stocking</TD>
  203.         <TD>1/1/30</TD>
  204.         <TD>613-555-1338</TD>
  205.         <TD>DIFFERENT</TD>
  206.     </TR>
  207.         <TR>
  208.         <TD>10</TD>
  209.         <TD>111222</TD>
  210.         <TD>2/2/01</TD>
  211.         <TD>345-555-7654</TD>
  212.         <TD>DIFFERENT</TD>
  213.     </TR>
  214.         <TR>
  215.         <TD>11</TD>
  216.         <TD>Apple Man</TD>
  217.         <TD>3/13/74</TD>
  218.         <TD>215-555-4043</TD>
  219.         <TD>DIFFERENT</TD>
  220.     </TR>
  221. </TABLE>
  224. <p><center>
  225. <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
  226. by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  227. </center><p>
  229. <!-- Script Size: 7.51 KB -->
Free Programming Resources
  • vickriz
  • Novice
  • Novice
  • User avatar
  • Joined: Jul 28, 2003
  • Posts: 31
  • Loc: Phlippines
  • Status: Offline

Post July 30th, 2003, 7:45 pm

RichB wrote:
I'm getting "object doesn't support this property or method" in both of the functions depending on which header row I click when I use the first example posted, so I think that the code was probably accidentally corrupted when cutting and pasting originally. I couldn't see the difference when I tried to compare it to the original script at The Javascript Source, but it's a relatively complicated script, so I would just recommend starting over by copying it again. I was able to get the original script working after copying and pasting it from The Javascript Source. Here is the file that I used if you just want to copy that:


Thanks for help now thats really working.. :lol:

Page 1 of 1

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 170 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.