Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 27th, 2005, 12:05 PM
Registered User
 
Join Date: Apr 2005
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to m3chyck Send a message via Yahoo to m3chyck
Default 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


Reply With Quote
  #2 (permalink)  
Old April 27th, 2005, 04:14 PM
Friend of Wrox
 
Join Date: Jun 2003
Location: High Wycombe, UK, United Kingdom.
Posts: 344
Thanks: 0
Thanked 1 Time in 1 Post
Default

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
Reply With Quote
  #3 (permalink)  
Old May 3rd, 2005, 07:25 PM
nzakas's Avatar
Wrox Author
 
Join Date: Dec 2004
Location: Peabody, MA, USA.
Posts: 217
Thanks: 0
Thanked 5 Times in 5 Posts
Default

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/
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
stop current javascript function using javascript sakthi Javascript 3 June 2nd, 2008 03:30 PM
dynamically loading table using javascript bkalyanchakri Javascript How-To 1 November 1st, 2005 07:21 AM
(oracle 8i)Alter Table <table> coalesce partition combo Oracle 3 October 13th, 2004 09:35 AM
size of table (type table is table of number) MikoMax Oracle 1 November 19th, 2003 03:11 AM
Table Sort With Javascript Ben Horne Javascript How-To 5 November 6th, 2003 05:50 AM



All times are GMT -4. The time now is 06:19 AM.


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