• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • Ron McLeod
  • paul wheaton
  • Jeanne Boyarsky
Sheriffs:
  • Paul Clapham
  • Devaka Cooray
Saloon Keepers:
  • Tim Holloway
  • Roland Mueller
  • Himai Minh
Bartenders:

How to sort table column data

 
Ranch Hand
Posts: 469
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
All,
If anybody has code and reference which states how to sort the table data when I click on column header using javascripts?
This MUST work in IE5+, NS4.78 and NS 6.0
Thanks,
Angela
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You might want to look at this page and see how it can be done.
http://www.daveclarkconsulting.com/research/dynamic_table.html
 
Ranch Hand
Posts: 838
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Angela,
I was wondering if you were strictly using javascript in this application? If not, what else are you using? ASP? JSP? Perl?
Rob
 
Angela D'souza
Ranch Hand
Posts: 469
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks, But I am restricted using Java and Javascript only.
Al, I looked at the link. I looking for static table sorting instead of dynamic table sorting.
I will appreciate if you have simple example
Thanks,
Angela
 
Angela D'souza
Ranch Hand
Posts: 469
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This following is code which is working in IE5+ but now in Netscape 4.78 I don't know what is wrong???
<!-- TWO STEPS TO INSTALL SORT DATA TABLE:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<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)
{
alert(col);
var iCurCell = col + tableToSort.cols;
alert(iCurCell);
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>
<Form>
<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>
</FORM>
<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 -->
 
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
im no expert, but i have never seen a link point to a js function
i would have expected to see an onclick statement instead. that could possibly be the problem. IE allows many things not in the specs. i tried checking the html reference to see if you can use onclick in a td tag but the site was down
 
Ranch Hand
Posts: 403
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Randall,

Is valid HTML, and a quite common method of invoking a JavaScript function.
Angela,
You might have read a disclaimer from where you obtained your code that it will only work on IE5+ browsers.
In particular:

Netscape does not support properties such as "innerHTML" "innerText" or in general any DOM manipulation.
While IE has an extensive DOM structure of a given HTML document given, and its structure can be quite easily changed dynamically.
Probably doesn't help you much, but this is more to let you know you will have to look down a much different avenue to get your example to work under Netscape.
 
Ranch Hand
Posts: 112
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
a simpledocument.write of a frame gets around nn 4.x.
3 steps
1.put your table data into a javascript array of arrays representing the html table data.
2.javasrcipt onclick event function to sort the javascript array then uses the sorted array to regenerate the html table.
3.frame to write/rewrite the sorted html table.
I built a reusable oo javascript dynamic table where you pass the html table + javascript 2 d array and you get columns sorts and searchs but it only works with ie 5+.
I also have a good example using the html rewrite nn 4.x as well.
see my profile and go to the web site
If you have any questions or want specific help just send me e-mail


ps
The web host I use,brinkster,has been very unreliable lately and you may have problems accessing my examples.
[ August 02, 2002: Message edited by: Charlie Sturman ]
 
Charlie Sturman
Ranch Hand
Posts: 112
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
A complete example using frames.This could also be done with nn 4.x layers where you rewrite the layer instead of rewriting the frame.
There are 3 files
the frame set:sortframe.html
the code frame:sortCode.html
the display:sortedDisplay.html
sorted columns for ie and nn.4
hope this helps
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic