Table Sort Script Question [Archive]

Click to See Complete Forum and Search --> : Table Sort Script Question

BrainDonor

06-19-2003, 12:15 PM

What would I need to do to this script http://javascript.internet.com/forms/sort-data-table.html to get it to sort a specific column in descending order rather than ascending?

Thanks,
Tom

[Edit] Meant to say specific column, not row. 1000 apologies.

Khalid Ali

06-19-2003, 12:49 PM

Typically most of the people would get the values from the each cell from the selected column and put those values in an array,then sort that array and repopulate the relative cells,
It seems like what you are after is allot easier in the sens that real object flow is tr+td's
and you are only dealing with 1 tr at a time.
So do the following

get the ref for the tr that is selected.
get all the td's for that row
put all of the vals in an array an then sort that array using
Array.sort()
and repopulate all the cells

AdamBrill

06-19-2003, 12:51 PM

Or just insert this line:oldIndex.reverse();Put it right before this comment in the code:// ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE ....

BrainDonor

06-19-2003, 12:59 PM

Thanks guys. I apologize Khalid, I meant to say column, not row.

I suppose then I could get a drop-down box to do the same thing as clicking the column headings, correct? I could also put in logic in to ask whether the user wants column 5 sorted in either ascending or descending order?

Tom

BrainDonor

06-19-2003, 01:11 PM

I've cleaned this up quite a bit. I'd like to be able to maintain the colors for every other row after the table has been re-sorted. Is this possible?

Here's the code...

<HTML>
<HEAD>
<TITLE>The JavaScript Source: Forms: Sort Data Table</TITLE>

<SCRIPT LANGUAGE="JavaScript">

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)
{
var iCurCell = col + tableToSort.cols;
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;
}
}
}
oldIndex.reverse();
// ** 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();
}
}

</script>

</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

 

<basefont size=3>


Click on the column headings to sort the information in the table. IE 5+ only.
<hr>
</td></tr>
</table>

<TABLE WIDTH=90% BORDER=1 CELLSPACING=1 CELLPADDING=1 name="rsTable" id=rsTable cols=6>
<TR bgcolor=#0099cc>
<TD><A href="javascript:sortTable(0, rsTable);">ID</A></TD>
<TD><A href="javascript:sortTable(1, rsTable);">NAME</A></TD>
<TD><A href="javascript:sortTable(2, rsTable);">DATE</A></TD>
<TD><A href="javascript:sortTable(3, rsTable);">PHONE</A></TD>
<TD><A href="javascript:sortTable(4, rsTable);">WORKFLOW</A></TD>
<TD><A href="javascript:sortTable(5, rsTable);">LETTER</A></TD>
</TR>
<TR bgcolor=#D3D3D3>
<TD>1</TD>
<TD>Andy Berry</TD>
<TD>4/9/72</TD>
<TD>763-555-1212</TD>
<TD>REVIEW</TD>
<TD>A</TD>
</TR>
<TR bgcolor=#0099cc>
<TD>2</TD>
<TD>Dan Developer</TD>
<TD>9/3/63</TD>
<TD>215-555-1400</TD>
<TD>SAME</TD>
<TD>B</TD>
</TR>
<TR bgcolor=#D3D3D3>
<TD>3</TD>
<TD>John Javascript</TD>
<TD>3/4/71</TD>
<TD>612-555-0987</TD>
<TD>REVIEW</TD>
<TD>E</TD>
</TR>
<TR bgcolor=#0099cc>
<TD>4</TD>
<TD>Jerry JSPage</TD>
<TD>8/2/71</TD>
<TD>215-555-7654</TD>
<TD>SAME</TD>
<TD>H</>
</TR>
<TR bgcolor=#D3D3D3>
<TD>5</TD>
<TD>Mary Mainframe</TD>
<TD>3/28/70</TD>
<TD>763-555-8295</TD>
<TD>REVIEW</TD>
<TD>D</TD>
</TR>
<TR bgcolor=#0099cc>
<TD>6</TD>
<TD>Elaine Ecommerce</TD>
<TD>2/28/29</TD>
<TD>612-555-1338</TD>
<TD>REVIEW</TD>
<TD>F</TD>
</TR>
<TR bgcolor=#D3D3D3>
<TD>7</TD>
<TD>John Smith</TD>
<TD>12/31/00</TD>
<TD>610-555-0987</TD>
<TD>SAME</TD>
<TD>I</TD>
</TR>
<TR bgcolor=#0099cc>
<TD>8</TD>
<TD>Candy Coder</TD>
<TD>4/1/70</TD>
<TD>000-555-9099</TD>
<TD>SAME</TD>
<TD>G</TD>
</TR>
<TR bgcolor=#D3D3D3>
<TD>9</TD>
<TD>Pippy Long Stocking</TD>
<TD>1/1/30</TD>
<TD>613-555-1338</TD>
<TD>DIFFERENT</TD>
<TD>J</TD>
</TR>
<TR bgcolor=#0099cc>
<TD>10</TD>
<TD>111222</TD>
<TD>2/2/01</TD>
<TD>345-555-7654</TD>
<TD>DIFFERENT</TD>
<TD>K</TD>
</TR>
<TR bgcolor=#D3D3D3>
<TD>11</TD>
<TD>Apple Man</TD>
<TD>3/13/74</TD>
<TD>215-555-4043</TD>
<TD>DIFFERENT</TD>
<TD>C</TD>
</TR>
</TABLE>

</body></html>

BrainDonor

06-19-2003, 09:56 PM

as an add on question...

can I assign different colors to the rows after the table is re-sorted?

Thanks,
Tom

AdamBrill

06-19-2003, 10:24 PM

Here, try this. Notice the color1 and color2 variable(toward the top); change those to whatever color you want them to be...<HTML>
<HEAD>
<TITLE>The JavaScript Source: Forms: Sort Data Table</TITLE>

<SCRIPT LANGUAGE="JavaScript">

var color1 = "#D3D3D3";
var color2 = "#0099cc";

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)
{
var iCurCell = col + tableToSort.cols;
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;
}
}
}
oldIndex.reverse();
display1=true;
// ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE ....
for (i=0; i<oldIndex.length; i++){
newRow = tableToSort.insertRow();
if(display1==true){
color=color1;
display1=false;
}else{
color=color2;
display1=true;
}
for (c=0; c<tableToSort.cols; c++){
newCell = newRow.insertCell();
newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML;
newCell.style.backgroundColor=color;

}
}
//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();
}
}

</script>

</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

 

<basefont size=3>


Click on the column headings to sort the information in the table. IE 5+ only.
<hr>
</td></tr>
</table>

<TABLE WIDTH=90% BORDER=1 CELLSPACING=1 CELLPADDING=1 name="rsTable" id=rsTable cols=6>
<TR bgcolor=#0099cc>
<TD><A href="javascript:sortTable(0, rsTable);">ID</A></TD>
<TD><A href="javascript:sortTable(1, rsTable);">NAME</A></TD>
<TD><A href="javascript:sortTable(2, rsTable);">DATE</A></TD>
<TD><A href="javascript:sortTable(3, rsTable);">PHONE</A></TD>
<TD><A href="javascript:sortTable(4, rsTable);">WORKFLOW</A></TD>
<TD><A href="javascript:sortTable(5, rsTable);">LETTER</A></TD>
</TR>
<TR bgcolor=#D3D3D3>
<TD>1</TD>
<TD>Andy Berry</TD>
<TD>4/9/72</TD>
<TD>763-555-1212</TD>
<TD>REVIEW</TD>
<TD>A</TD>
</TR>
<TR bgcolor=#0099cc>
<TD>2</TD>
<TD>Dan Developer</TD>
<TD>9/3/63</TD>
<TD>215-555-1400</TD>
<TD>SAME</TD>
<TD>B</TD>
</TR>
<TR bgcolor=#D3D3D3>
<TD>3</TD>
<TD>John Javascript</TD>
<TD>3/4/71</TD>
<TD>612-555-0987</TD>
<TD>REVIEW</TD>
<TD>E</TD>
</TR>
<TR bgcolor=#0099cc>
<TD>4</TD>
<TD>Jerry JSPage</TD>
<TD>8/2/71</TD>
<TD>215-555-7654</TD>
<TD>SAME</TD>
<TD>H</>
</TR>
<TR bgcolor=#D3D3D3>
<TD>5</TD>
<TD>Mary Mainframe</TD>
<TD>3/28/70</TD>
<TD>763-555-8295</TD>
<TD>REVIEW</TD>
<TD>D</TD>
</TR>
<TR bgcolor=#0099cc>
<TD>6</TD>
<TD>Elaine Ecommerce</TD>
<TD>2/28/29</TD>
<TD>612-555-1338</TD>
<TD>REVIEW</TD>
<TD>F</TD>
</TR>
<TR bgcolor=#D3D3D3>
<TD>7</TD>
<TD>John Smith</TD>
<TD>12/31/00</TD>
<TD>610-555-0987</TD>
<TD>SAME</TD>
<TD>I</TD>
</TR>
<TR bgcolor=#0099cc>
<TD>8</TD>
<TD>Candy Coder</TD>
<TD>4/1/70</TD>
<TD>000-555-9099</TD>
<TD>SAME</TD>
<TD>G</TD>
</TR>
<TR bgcolor=#D3D3D3>
<TD>9</TD>
<TD>Pippy Long Stocking</TD>
<TD>1/1/30</TD>
<TD>613-555-1338</TD>
<TD>DIFFERENT</TD>
<TD>J</TD>
</TR>
<TR bgcolor=#0099cc>
<TD>10</TD>
<TD>111222</TD>
<TD>2/2/01</TD>
<TD>345-555-7654</TD>
<TD>DIFFERENT</TD>
<TD>K</TD>
</TR>
<TR bgcolor=#D3D3D3>
<TD>11</TD>
<TD>Apple Man</TD>
<TD>3/13/74</TD>
<TD>215-555-4043</TD>
<TD>DIFFERENT</TD>
<TD>C</TD>
</TR>
</TABLE>

</body></html>

BrainDonor

06-19-2003, 10:31 PM

This is great! Thanks Adam!! You rock! :)

Tom

AdamBrill

06-19-2003, 10:58 PM

No Problem. ;) I'm glad I could help. :)