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 October 29th, 2003, 01:25 PM
Friend of Wrox
 
Join Date: Sep 2003
Location: Madison, Wisconsin, USA.
Posts: 451
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to Ben Horne
Default Table Sort With Javascript

Hi all,

I'm having a bit of a problem. I have a table set up that displays data for a few states along with a list box that conatins the values to sort the table data by (State, Date of Admission, Population, etc). The assignment for Introduction to Internet Programming calls for Javascript code that will sort the table data when one of the above mentioned values is selected in the drop-down menu. What Javascript code should I use?

Thanks in advance,

Ben
Madison Area Technical College student
-------------------------
I am one of those people that you call "Microsoft Access Freaks". I'm addicted to Access
__________________
Ben Horne
-------------------------
I don\'t want to sound like I haven\'t made any mistakes.  I\'m confident I have.

Most likely using FireFox and concocting my next Macromedia Flash project
Snibworks Forums Moderator

Welcome to the New Age
Reply With Quote
  #2 (permalink)  
Old October 30th, 2003, 05:12 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

If it's a class assignment it seems a bit much to ask for the code but there a number of options. I assume you want to do this client-side, server side would probably involve posting the sort type to the server and re-querying the database using a different SQL query?
Do you have the table data in a separate format, e.g. an xml data island or an array, or do you just have a static web page?

--

Joe
Reply With Quote
  #3 (permalink)  
Old October 30th, 2003, 03:40 PM
Friend of Wrox
 
Join Date: Sep 2003
Location: Madison, Wisconsin, USA.
Posts: 451
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to Ben Horne
Default

I actually have to have the table created in a Javascript array. The table will be populated entirely from the information that I entered in the Javascript code

Quote:
quote:Originally posted by joefawcett
 If it's a class assignment it seems a bit much to ask for the code but there a number of options. I assume you want to do this client-side, server side would probably involve posting the sort type to the server and re-querying the database using a different SQL query?
Do you have the table data in a separate format, e.g. an xml data island or an array, or do you just have a static web page?

--

Joe
Ben
Madison Area Technical College student
-------------------------
I am one of those people that you call "Microsoft Access Freaks". I'm addicted to Access
Reply With Quote
  #4 (permalink)  
Old October 31st, 2003, 05:56 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Well I don't know how you are creating the table. Let's say you are looping through the array using a for loop and outputing a row for each iteration. When the user clicks the sort button you need to sort the array. You need the Array.protype.sort method. Then recontruct the table using the newly sorted array. Steps involved follow:
1) Create a function that takes an array and displays a table.
2) Create any helper functions for sort method. (See MSDN JScript docs)
3) Create a function that sorts Array and passes it to function in (1)
4) Put onclick attributes in table header that calls function in (3)

Have a go, if you need more help show us your code and we'll go on from there.


--

Joe
Reply With Quote
  #5 (permalink)  
Old November 4th, 2003, 12:57 PM
Friend of Wrox
 
Join Date: Sep 2003
Location: Madison, Wisconsin, USA.
Posts: 451
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to Ben Horne
Default

Here's the Javascript code I have so far:

<script language="Javascript">
<!--


      var strHeader = new Array("State", "Population", "Area, "Admission Date")
      var StateInfo= new Array()
  ["Wisconsin", "5363675", "65503 sq.mi", "May 29, 1848")],
  ["Iowa", "2926324", "56276 sq. mi", "December 28, 1846")],
  ["Florida", "15982378", "35758 sq. mi", "March 3, 1845")],
  ["Virginia", "7078515", "42769 sq. mi", "June 25, 1788")],
  ["Alaska", "626932", "656425 sq. mi", "January 3, 1959")],
  ["New York", "18976457", "54475 sq. mi", July 26, 1788")],
...}
    var thismonth= new Array(12)
                       thismonth{0}="January";

  ...}
  function SortStates()

   {
         var intemNdx = document.form1.selTableOrder.selectedIndex;
          var itemText =
          document.form1.selTableOrder.options[itemNdx].innerText;
   //Sort by population, highest to lowest

     if (itemText=="Population")

          { //Sort code goes here
            }
                        );
     populateTable()
           //return &
              } //close if




Ben
Madison Area Technical College student
-------------------------
I am one of those people that you call "Microsoft Access Freaks". I'm addicted to Access
Reply With Quote
  #6 (permalink)  
Old November 6th, 2003, 05:50 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Here's my first effort, could be a bit more efficient but this way is probably easier to read.
Code:
<html>
<head>
<title>Sort Table</title>
<script type="text/javascript">

  var TableHeaders = new Array("State", "Population", "Area", "Admission Date");

  var StateInfo= [ 
                   ["Wisconsin", "5363675", "65503 sq.mi", "May 29, 1848"],
                   ["Iowa", "2926324", "56276 sq. mi", "December 28, 1846"],
                   ["Florida", "15982378", "35758 sq. mi", "March 3, 1845"],
                   ["Virginia", "7078515", "42769 sq. mi", "June 25, 1788"],
                   ["Alaska", "626932", "656425 sq. mi", "January 3, 1959"],
                   ["New York", "18976457", "54475 sq. mi", "July 26, 1788"]
                 ];

  function SortStates()
  {
    var fnSort = getSortFunction(getSortColumn());   
    StateInfo.sort(fnSort);
    showTable();
  }

  function getSortColumn()
  {
    var oLst = document.frmSortType.selTableOrder;
    var sSortColumn = oLst.options[oLst.selectedIndex].value;
    return sSortColumn;
  }

  function getSortFunction(column)
  {
    switch (column)
    {
        case "state":
          return sortOnState;
        break;
        case "population":
          return sortOnPopulation;
        break;
        case "area":
          return sortOnArea;
        break;
        case "date":
          return sortOnAdmissionDate;
        break;
    }
    return null;
  }

  function sortOnState(Item1, Item2)
  {
    if (Item1[0] < Item2[0])
    {
      return -1;    
    }
    if (Item1[0] > Item2[0])
    {
      return 1;    
    }
    return 0;
  }

  function sortOnPopulation(Item1, Item2)
  {
    var item1 = parseInt(Item1[1], 10);
    var item2 = parseInt(Item2[1], 10);
    if (item1 < item2)
    {
      return -1;    
    }
    if (item1 > item2)
    {
      return 1;    
    }
    return 0;
  }

  function sortOnArea(Item1, Item2)
  {
    var iSpacePos = Item1[2].indexOf(" ");
    var item1 = Item1[2].substr(0, iSpacePos);
    iSpacePos = Item2[2].indexOf(" ");
    var item2 = Item2[2].substr(0, iSpacePos);
    if (item1 < item2)
    {
      return -1;    
    }
    if (item1 > item2)
    {
      return 1;    
    }
    return 0;
  }

  function sortOnAdmissionDate(Item1, Item2)
  {
    var item1 = Date.parse(Item1[3]);
    var item2 = Date.parse(Item2[3]);
    if (item1 < item2)
    {
      return -1;    
    }
    if (item1 > item2)
    {
      return 1;    
    }
    return 0;
  }

  function addTableHeaders()
  {
    var oHead = document.getElementById("tblData").tHead;
    var oRow = oHead.insertRow();
    for (var i = 0; i < TableHeaders.length; i++)
    {
      var oCell = document.createElement("th");
      oCell.innerHTML = TableHeaders[i];
      oRow.appendChild(oCell);
    }
  }

  function showTable()
  {
    var oTable = document.getElementById("tblData")
    var oBody = oTable.tBodies[0];
    if (oBody)
    {
      oBody.removeNode(true);    
    }
    oBody = document.createElement("tbody");
    oTable.appendChild(oBody);
    for (var i = 0; i < StateInfo.length; i++)
    {
      var rowData = StateInfo[i];
      var oRow = oBody.insertRow();
      for (var j = 0; j < rowData.length; j++)
      {
        var oCell = oRow.insertCell();
        oCell.innerHTML = rowData[j];
      }
    }
  }

  function init()
  {
    addTableHeaders();
    SortStates();    
  }

</script>
</head>

<body bgcolor="#FFFFFF" onload="init();">
<form name="frmSortType">
<select name="selTableOrder" onchange="SortStates();">
<option selected value="state">State</option>
<option value="population">Population</option>
<option value="area">Area</option>
<option value="date">Admission Date</option>
</select>
<table id="tblData" border="1" cols="4" width="80%" align="center">
  <caption>US States</caption>
  <thead></thead>  
</table>
</body>
</html>
--

Joe
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
Sort Table Columns by Table Header Attribute omrieliav XSLT 4 June 7th, 2006 01:05 AM
how to sort cross tab.sort based on row total joxa83 Crystal Reports 7 March 2nd, 2006 09:12 AM
Sort column in dynamic table Dreamweaver MX frodedahl Dreamweaver (all versions) 1 September 23rd, 2005 02:59 AM
Sort By when table dynamically built using FSO nancy Classic ASP Databases 6 September 11th, 2004 04:17 AM
DataIsland + Sort + link on JavaScript luisvizuete XSLT 1 November 5th, 2003 02:11 PM



All times are GMT -4. The time now is 04:41 AM.


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