p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   Javascript How-To (http://p2p.wrox.com/forumdisplay.php?f=87)
-   -   Need help with javascript table sorter! (http://p2p.wrox.com/showthread.php?t=28646)

m3chyck April 27th, 2005 12:05 PM

Need help with javascript table sorter!
 
Hello everyone, I've never used one of these forums in my life so we'll see if anyone responds. I'm just starting webdesign, I know html and I'm slowly picking up javascript (will be getting a book soon for sure). Anyway I'm trying to create a table sorter that will basically look like this one: http://www.bluenile.com/diamond_search.asp?track=dsb

Infact, it will have near the same criteria. (shape, carat, clarity, color, certificate (whether or not there is one), price, and item number). I don't have much so far.. all I have is this that I've taken from another site that allows u to take the code:

Try not to laugh too hard.. ::beginner learning on own::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>


<HEAD>

<SCRIPT LANGUAGE="JavaScript">


function setDataType(cValue)
  {

    var isDate = new Date(cValue);
    if (isDate == "NaN")
      {
        if (isNaN(cValue))
          {

            cValue = cValue.toUpperCase();
            return cValue;
          }
        else
          {

            var myNum;
            myNum = String.fromCharCode(48 + cValue.length) + cValue;
            return myNum;
          }
        }
  else
      {
           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;
       for (i=1; i < tableToSort.rows.length; i++)
      {
        colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText) ;
        iCurCell = iCurCell + tableToSort.cols;
      }

    for (i=0; i < colArray.length; i++)
      {
        bArray[i] = colArray[i];
      }

    colArray.sort();

    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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></HEAD>



<BODY bgcolor="#6E5C34" text="#6E5C34">

<TABLE WIDTH="536" BORDER=1 align="center" CELLPADDING=1 CELLSPACING=0 bordercolor="#F3E0B6" cols=5 bgcolor="#FFFFFF" id=rsTable name="rsTable">
    <TR bgcolor=#F3E0B6>
      <TD width="71" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(0, rsTable);">Shape</A></div></TD>
      <TD width="55" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(1, rsTable);">Carat(s)</A></div></TD>
      <TD width="44" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(2, rsTable);">Color</A></div></TD>
      <TD width="71" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(3, rsTable);">Clarity</A></div></TD>
      <TD width="71" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(4, rsTable);">Certificate</A></div></TD>
      <TD width="104" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(5, rsTable);">Price</A></div></TD>
      <TD width="90" bgcolor="#F3E0B6"><div align="center"><A href="javascript:sortTable(6, rsTable);">Item #</A></div></TD>
    </TR><TR>
      <TD bgcolor="#FFFFFF"><div align="center">Round</div></TD>
      <TD bgcolor="#FFFFFF"><div align="center">.49</div></TD>
      <TD bgcolor="#FFFFFF"><div align="center">H</div></TD>
      <TD><div align="center">SI1</div></TD>
      <TD><div align="center">GIA</div></TD>
      <TD><div align="center">$1,550.00</div></TD>
      <TD><div align="center">51-00591</div></TD>
    </TR>
    <TR>
        <TD><div align="center">Round</div></TD>
        <TD><div align="center">.50</div></TD>
        <TD><div align="center">G</div></TD>
        <TD><div align="center">SI1</div></TD>
        <TD><div align="center">-</div></TD>
        <TD><div align="center">$1,975.00</div></TD>
        <TD><div align="center">01-00101</div></TD>
    </TR>
    <TR>
        <TD><div align="center">Round</div></TD>
        <TD><div align="center">.50</div></TD>
        <TD><div align="center">G</div></TD>
        <TD><div align="center">VS2</div></TD>
        <TD><div align="center">-</div></TD>
        <TD><div align="center">$3,650.00</div></TD>
        <TD><div align="center">01-00287</div></TD>
    </TR>
    <TR>
  <blue>and so on with the tables</blue>

<p><center>
Free JavaScripts provided<br>
</center>
<p>

</BODY>
</HTML>


I know i'm missing quite a lot, could anyone guide me in the right direction? It really would be greatly appreciated, thank you for reading my post.

-Bridget[:I]



Greg Griffiths April 27th, 2005 04:14 PM

All the sorting on the page is done via ASP, I guess they are using the value of the icon clicked onto pass as teh sort criteria to the SQL that gets the data from teh database.

if you want to do this clientside take a look at http://builder.com.com/5100-6371_14-5515013-1-1.html

nzakas May 3rd, 2005 07:25 PM

You can also check out the downloads for Professional JavaScript for Web Developers (http://www.wrox.com/WileyCDA/WroxTit...load_code.html) which includes the table sorting sample found in the book.

Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
http://www.nczonline.net/


All times are GMT -4. The time now is 08:26 PM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.