Form Table with data

  • vickriz
  • Novice
  • Novice
  • User avatar
  • Posts: 31
  • Loc: Phlippines

Post 3+ Months Ago

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 -->
  121. HTML:
  122. <table width="75%" border=1 cellspacing="1" cellpadding="1" name="rstable" id=rstable cols=5>
  123.   <tr bgcolor=mediumblue>
  124.     <td><a href="javascript:sorttable(0, rstable);"><font color=white><b>ID</b></font></a></td>
  125.     <td><a href="javascript:sorttable(1, rstable);"><font color=white><b>NAME</b></font></a></td>
  126.     <td><a href="javascript:sorttable(2, rstable);"><font color=white><b>DATE</b></font></a></td>
  127.     <td><a href="javascript:sorttable(3, rstable);"><font color=white><b>PHONE</b></font></a></td>
  128.     <td><a href="javascript:sorttable(4, rstable);"><font color=white><b>WORKFLOW</b></font></a></td>
  129.   </tr></font>
  130.   <tr>
  131.     <td>1</td>  <td>Andy Berry</td>  <td>4/9/72</td>  <td>763-555-1212</td> <td>REVIEW</td>
  132.   </tr>
  133.   <tr>
  134.     <td>2</td>  <td>Dan Developer</td>  <td>9/3/63</td>  <td>215-555-1400</td> <td>SAME</td>
  135.   </tr>
  136.   <tr>
  137.     <td>3</td>  <td>John Javascript</td> <td>3/4/71</td> <td>612-555-0987</td> <td>REVIEW</td>
  138.   </tr>
  139.   <tr>
  140.     <td>4</td> <td>Jerry JSPage</td> <td>8/2/71</td> <td>215-555-7654</td> <td>SAME</td>
  141.   </tr>
  142.   <tr>
  143.     <td>5</td> <td>Mary Mainframe</td> <td>3/28/70</td> <td>763-555-8295</td> <td>REVIEW</td>
  144.   </tr>
  145.   <tr>
  146.     <td>6</td> <td>Elaine Ecommerce</td> <td>2/28/29</td> <td>612-555-1338</td> <td>REVIEW</td>
  147.   </tr>
  148.   <tr>
  149.     <td>7</td> <td>John Smith</td> <td>12/31/00</td> <td>610-555-0987</td> <td>SAME</td>
  150.   </tr>
  151.   <tr>
  152.     <td>8</td> <td>Candy Coder</td> <td>4/1/70</td> <td>000-555-9099</td> <td>SAME</td>
  153.   </tr>
  154.     <tr>
  155.     <td>9</td> <td>Pippy Long Stocking</td> <td>1/1/30</td> <td>613-555-1338</td> <td>DIFFERENT</td>
  156.   </tr>
  157.   <tr>
  158.     <td>10</td> <td>111222</td> <td>2/2/01</td> <td>345-555-7654</td> <td>DIFFERENT</td>
  159.   </tr>
  160.   <tr>
  161.     <td>11</td> <td>Apple Man</td> <td>3/13/74</td> <td>215-555-4043</td> <td>DIFFERENT</td>
  162.   </tr>
  163. </table>
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

Where did you place the JavaScript? Within the "head" tags?
Second question would be, did you add the "onLoad" to the body tags?
  • vickriz
  • Novice
  • Novice
  • User avatar
  • Posts: 31
  • Loc: Phlippines

Post 3+ Months Ago

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
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • vickriz
  • Novice
  • Novice
  • User avatar
  • Posts: 31
  • Loc: Phlippines

Post 3+ Months Ago

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
  • Posts: 9091
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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.
  • vickriz
  • Novice
  • Novice
  • User avatar
  • Posts: 31
  • Loc: Phlippines

Post 3+ Months Ago

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
  • Posts: 9091
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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

Post 3+ Months Ago

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:

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 109 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.