File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Sorting of Table Big Moose Saloon
  Search | Java FAQ | Recent Topics
Register / Login


Win a copy of Practical Unit Testing with TestNG and Mockito this week in the Testing forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Reply Bookmark "Sorting of Table" Watch "Sorting of Table" New topic
Author

Sorting of Table

Dhaval Shah
Greenhorn

Joined: Apr 26, 2004
Posts: 4
I have a quick question for you.
I have a table with three columns. The table is generated dynamically so can�t tell about the rows. Once data has been displayed user can sort (ascending or descending) the data of table by clicking the any of the header.
Awaiting reply.
Dhaval
Chengwei Lee
Ranch Hand

Joined: Apr 02, 2004
Posts: 884
So what's the issue actually? You've some codes that need help in debugging? Or you need suggestions on how to approach your problem?
Anyway, you need to be more specific in your question, if not its rather difficult to help you.
I'm assuming that each row of your table is essentially a Javabean. So you can actually use Comparator to sort them according to your needs (column).


SCJP 1.4 * SCWCD 1.4 * SCBCD 1.3 * SCJA 1.0 * TOGAF 8
Dirk Schreckmann
Sheriff

Joined: Dec 10, 2001
Posts: 7023
Welcome to JavaRanch, Dhaval!
In what context is your GUI running? Is it a web page of a web application? Is it a Swing / AWT based GUI?
Either way, you're possibly going to be taking advantage of the compareTo method of the Comparable interface.


[How To Ask Good Questions] [JavaRanch FAQ Wiki] [JavaRanch Radio]
Dhaval Shah
Greenhorn

Joined: Apr 26, 2004
Posts: 4
Hi Guys,
Let me be more elaborate on this. I am fetching data from database and displaying it on web page (html) in a table format. By clicking the header of the table I want to sort the data of table with the help of javascript.
This can be done by going back to server, fetching the data according to new sorting order and display it again. But instead of going back to server I want to use javascript if available.
Thanks in Advance,
Dhaval
Dirk Schreckmann
Sheriff

Joined: Dec 10, 2001
Posts: 7023
JavaScript is not Java.
Let me repeat. JavaScript is not Java.
Say it ten times.
JavaScript is not Java.
JavaScript is not Java.
JavaScript is not Java.
JavaScript is not Java.
JavaScript is not Java.
JavaScript is not Java.
JavaScript is not Java.
JavaScript is not Java.
JavaScript is not Java.
JavaScript is not Java.
Moving this to the HTML and JavaScript forum...
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15003
http://www.coderanch.com/forums/
Mehul Doshi
Greenhorn

Joined: May 06, 2004
Posts: 1
Here is the Code for u....
Call Sort Table function and pass the Input Parameter
1st Parameter = Column Number (Starts with 0)
2nd Parameter = Table name (which u want to Sort)

//**********************************************************************************
/**
* Funtion Name: sortTable
* This function is to sort table columns
* Parameters:
* col: Column number in a table which has to be sorted.
* tableId: Table id for stating which table's column has to be sorted
*/
var allNums = false; // boolean variable to see if whole column is numeric
var allDates = false; // boolean variable to see if column vals are all dates
var lastSort = -1; // variable to hold last column number sorted
var absOrder = true; // boolean to sort in reverse if on same column
//-----------------------------------------------------------------------
function setDataType(inValue) {
// This function checks data type of a value
// - sets allNums to false if a non-number is found
// - sets allDates to false if a non-date is found
var isDate = new Date(inValue);
if (isDate == "NaN") {
if (isNaN(inValue)){
// The value is a string, make all characters in
// String upper case to assure proper a-z sort
inValue = inValue.toUpperCase();
allNums = false
allDates = false
return inValue;
}
else {
// Value is a number, make sure it is not treated as a string
allDates = false
return parseFloat(1*inValue);
}
}
else {
// Value to sort is a date
allNums = false
return inValue ;
}
}
//-----------------------------------------------------------------------
function sortTable(col, tableId){
if (lastSort == col){
// sorting on same column twice = reverse sort order
absOrder ? absOrder = false : absOrder = true
}
else{
absOrder = true
}
lastSort = col
// Code added for Displaying Up and Down Image
var gapFillLen = document['gapFill'].length;
for (i=0; i<gapFillLen; i++){
document['gapFill'][i].src = "web/image/spacer.gif";
}
if (absOrder){
document['gapFill'][col].src = "web/image/up.gif";
}else{
document['gapFill'][col].src = "web/image/down.gif";
}
// End of Code for Displaying Up and Down Image
allTR = document.getElementById(tableId).childNodes[0].childNodes
// allTR now holds all the rows in the tableId
totalRows = allTR.length
colToSort = new Array() //holds all the cells in the column to sort
colArr = new Array() //holds all the rows that correspond to the sort cell
copyArr = new Array() //holds an original copy of the sort data to match to colArr
resultArr = new Array() //holds the output
allNums = true
allDates = true
//store the original data
//remember that the first row - [0] - has column headings
//so start with the second row - [1]
//and load the contents of the cell into the array that will be sorted
for (x=1; x < totalRows; x++){
colToSort[x-1] = setDataType(allTR[x].childNodes[col].innerText)
colArr[x-1] = allTR[x]
}
//make a copy of the original
for (x=0; x<colToSort.length; x++){
copyArr[x] = colToSort[x]
}
//sort the original data based on data type
if (allNums){
colToSort.sort(numberOrder)
}
else if (allDates){
colToSort.sort(dateOrder)
}
else{
colToSort.sort(textOrder)
}
//match copy to sorted
for(x=0; x<colToSort.length; x++){
for(y=0; y<copyArr.length; y++){
if (colToSort[x] == copyArr[y]){
boolListed = false
//searcg the ouput array to make sure not to use duplicate rows
for(z=0; z<resultArr.length; z++){
if (resultArr[z]==y){
boolListed = true
break;
}
}
if (!boolListed){
resultArr[x] = y
break;
}
}
}
}
//now display the results - it is as simple as swapping rows
for (x=0; x<resultArr.length; x++){
allTR[x+1].swapNode(colArr[resultArr[x]])
}
}
function numberOrder(a,b){
absOrder ? rVal = b - a : rVal = a - b
return rVal
}
function dateOrder(a,b){
absOrder ? rVal = Date.parse(a) - Date.parse(b) : rVal = Date.parse(b) - Date.parse(a)
return rVal
}
function textOrder(a,b){
if (a.toString() < b.toString()){
absOrder ? rVal = -1 : rVal = 1;
}
else{
absOrder ? rVal = 1 : rVal = -1;
}
return rVal;
}
//**********************************************************************************
 
 
subject: Sorting of Table
 
Threads others viewed
SOS! I have deleted a Oracle table data without backup
Sorting of Table
Getting meta data from an Entity bean
Addressing dynamic table elements
inserting values to the database from table
IntelliJ Java IDE

cast iron skillet 49er

more from paul wheaton's glorious empire of web junk: cast iron skillet diatomaceous earth rocket mass heater sepp holzer raised garden beds raising chickens lawn care CFL flea control missoula heat permaculture