PDA

View Full Version : Sort/Reverse table upon columns

Kor
10-15-2004, 09:42 AM
The code sortes/reverses the rows of a table with data upon the correspondent chosen column.

Uses DOM methods

Tested in IE6, NS7, Firefox, Moz 1.7, Opera 7.5 on XP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sort_reverse table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
td {
background-color: #CCCCCC;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function sortIt(w){
r=document.getElementById('tab').rows;//the root
var oRows = new Array()//set the rows to be removed as an array of cloneNodes
var iRows = new Array()//set those rows' indexes as array
for(var i=1;i<r.length;i++){
oRows[i]=r[i].cloneNode(true);
iRows[i]=r[i].rowIndex;
}
q=w.parentNode.cellIndex;//set the column index of cells content
var oCol = new Array()//set the string content of column cells as array
var vCol = new Array()//set the "compare" array for a future sort/reverse
for(var i=0;i<iRows.length;i++){
oCol[i]=[r[i].cells[q].firstChild.nodeValue,iRows[i]];
vCol[i]=[r[i].cells[q].firstChild.nodeValue,iRows[i]];
}
oCol.shift();//remove the first element (the content of the cell in first row
vCol.shift();//do the same with "compare" array
oCol.sort();//sorts the content array
if(vCol.toString()==oCol.toString()){oCol.reverse()}//if the content was already sorted, reverse
for(var i=1;i<r.length;i++){
r[i].parentNode.replaceChild(oRows[oCol[i-1][1]],r[i])
}//writes the rows in a sorted/reversed order
}
</script>
</head>
<body>
<table id="tab" width="400" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td><a href="#" onclick="sortIt(this);return false">SORT/REVERSE</a></td>
<td><a href="#" onclick="sortIt(this);return false">SORT/REVERSE</a></td>
<td><a href="#" onclick="sortIt(this);return false">SORT/REVERSE</a></td>
</tr>
<tr>
<td>Banana</td>
<td>yellow</td>
<td>10</td>
</tr>
<tr>
<td>Apple</td>
<td>cyan</td>
<td>20</td>
</tr>
<tr>
<td>Cherry</td>
<td>blue</td>
<td>40</td>
</tr>
<tr>
<td>Drops</td>
<td>green</td>
<td>30</td>
</tr>
</tbody>
</table>

</body>
</html>
canadianjameson
10-17-2004, 11:54 PM
can it be moded to sort based on alphabetical order, or ascending/descending?
Garadon
10-18-2004, 07:07 AM
it does sort by alphabetical order, it don't handle numbers very well, and perhaps if you want to work more on it you should make one able to use links that are not part of the table to sort it.
And just to give you an idea there should be several dynamic table scripts around you could look at.
Kor
10-18-2004, 07:59 AM
to use links that are not part of the table

That should be not very different... A good ideea anyway. I did it this way only to keep the approach with similar facilities in OS or programs.

Tx for the advices
hemebond
10-18-2004, 10:27 AM
Kor, I hope you don't mind, but I was getting a few Javascript warnings so I've had a fiddle around, and came up with something that individually sorts all tbody groups within a (well-structured) table.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>sort_reverse table</title>
</head>
<body>
<table border="1" rules="groups">
<thead>
<tr>
<th><a href="" onclick="sort(this);return false">sort/reverse</a></th>
<th><a href="" onclick="sort(this);return false">sort/reverse</a></th>
<th><a href="" onclick="sort(this);return false">sort/reverse</a></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>200</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Banana</td>
<td>yellow</td>
<td>10</td>
</tr>
<tr>
<td>Apple</td>
<td>cyan</td>
<td>20</td>
</tr>
<tr>
<td>Cherry</td>
<td>blue</td>
<td>40</td>
</tr>
<tr>
<td>Drops</td>
<td>green</td>
<td>30</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Banana</td>
<td>yellow</td>
<td>10</td>
</tr>
<tr>
<td>Apple</td>
<td>cyan</td>
<td>20</td>
</tr>
<tr>
<td>Cherry</td>
<td>blue</td>
<td>40</td>
</tr>
<tr>
<td>Drops</td>
<td>green</td>
<td>30</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
function sort(w)
{
var table = find_parent_table(w);
if(table == null)
{
return;
}

var groups = table.getElementsByTagName('tbody');
for(var i = 0; i < groups.length; i++)
{
sort_rows(groups[i],w.parentNode.cellIndex);
}
}

function sort_rows(group,col)
{
var oRows = new Array(); //set the rows to be removed as an array of cloneNodes
var iRows = new Array(); //set those rows' indexes as array

for(var i = 0; i < group.rows.length; i++)
{
oRows[i] = group.rows[i].cloneNode(true);
iRows[i] = group.rows[i].sectionRowIndex;
}
var oCol = new Array(); //set the string content of column cells as array
var vCol = new Array(); //set the "compare" array for a future sort/reverse

for(i = 0; i < iRows.length; i++)
{
vCol[i] = oCol[i] = [group.rows[i].cells[col].firstChild.nodeValue,iRows[i]];
}

oCol.sort(); //sorts the content array

if(vCol.toString() == oCol.toString())
{
oCol.reverse(); //if the content was already sorted, reverse
}

for(i = 0; i < group.rows.length; i++)
{
group.replaceChild(oRows[oCol[i][1]],group.rows[i]); //writes the rows in a sorted/reversed order
}
}


function find_parent_table(el)
{
while(el.parentNode.nodeName.toLowerCase() != 'table' && el.parentNode.nodeName.toLowerCase() != 'body')
{
el = el.parentNode;
}

if(el.parentNode.nodeName.toLowerCase() != 'table')
{
return null;
}
else
{
return el.parentNode;
}
}
</script>
</html>
Kor
10-18-2004, 11:45 AM
Well yes, tx... I never use thead and tfoot in tables but I confess this particular problem the thead include might be justified.

I don't see which javascript warnings could you get... As I said, I tested with most important browsers... Well, I used a transitional Doctype, so that I think I avoid thus a much too strict validadtion... ;) . It might not work under a strict Doctype... But as long as page is transitional typed, it should be loaded without error...
hemebond
10-18-2004, 11:06 PM
It's not the DOCTYPE that decides how strict the Javascript parser is, it's my browser settings. I always have them set to strict. Your code doesn't declare variablesvar a;so I was getting warnings mostly for that. Other times it was redeclaration (for some reason Firefox doesn't keep variables only within their block, like the FOR loops).
Kor
10-19-2004, 08:12 AM
it's my browser settings

How's that? As I said, My IE, Moz and Opera give no error

On the other hand... I always considered that it is not necessary to declare a variable twice, first outside and second inside the function... I see no reason, as javascript is not C++ or pearl to ask for that...
hemebond
10-19-2004, 09:00 AM
about:configjavascript.options.strict true
Kor
10-19-2004, 09:46 AM
But the var variable; way of declare variable is not a W3C recomandation, is an ECMA one... Why use it, than?
hemebond
10-19-2004, 09:59 AM
Because Javascript is ECMAScript.