| 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
|
|
|