aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes How to sort table column data Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to sort table column data" Watch "How to sort table column data" New topic
Author

How to sort table column data

Angela D'souza
Ranch Hand

Joined: Jan 16, 2002
Posts: 469
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
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
You might want to look at this page and see how it can be done.
http://www.daveclarkconsulting.com/research/dynamic_table.html
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 819
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

Joined: Jan 16, 2002
Posts: 469
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

Joined: Jan 16, 2002
Posts: 469
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 -->
Randall Twede
Ranch Hand

Joined: Oct 21, 2000
Posts: 4347
    
    2

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


SCJP
Visit my download page
James Swan
Ranch Hand

Joined: Jun 26, 2001
Posts: 403
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.
Charlie Sturman
Ranch Hand

Joined: Apr 04, 2002
Posts: 112
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

Joined: Apr 04, 2002
Posts: 112
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
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How to sort table column data