Hola Dorita!
Te propongo otro script. Este esta mas completo, solo tiene un defecto grave: no ordena bien las
fechas, ya que todo lo toma como texto. Para este caso, podrias usar la funcion
setDataType del
script anterior. No es una tarea facil, pero es posible realizarla
Código PHP:
<html>
<head><title></title>
<style type="text/css">
/* tabla HTML */
table.sort{
border-spacing:0.1em;
margin-bottom:1em;
margin-top:1em
}
/* celdas de la tabla */
table.sort td{
border:1px solid #CCCCCC;
padding:0.3em 1em
}
/* titulos de la tabla */
table.sort thead td{
cursor:pointer;
cursor:hand;
font-weight:bold;
text-align:center;
vertical-align:middle
}
/* titulo de la columna ordenada */
table.sort thead td.curcol{
background-color:#999999;
color:#FFFFFF
}
</style>
<script type="text/javascript">
<!--
/*
originally written by paul sowden <[email protected]> | http://idontsmoke.co.uk
modified and localized by alexander shurkayev <[email protected]> | http://htmlcoder.visions.ru
*/
var img_dir = "/localfolder/images/"; // carpeta para 0.gif y 1.gif
// funcion extrae todo el texto de los nodos hijos
function getConcatenedTextContent(node) {
var _result = "";
if (node == null) {
return _result;
}
var childrens = node.childNodes;
var i = 0;
while (i < childrens.length) {
var child = childrens.item(i);
switch (child.nodeType) {
case 1: // ELEMENT_NODE
case 5: // ENTITY_REFERENCE_NODE
_result += getConcatenedTextContent(child);
break;
case 3: // TEXT_NODE
case 2: // ATTRIBUTE_NODE
case 4: // CDATA_SECTION_NODE
_result += child.nodeValue;
break;
case 6: // ENTITY_NODE
case 7: // PROCESSING_INSTRUCTION_NODE
case 8: // COMMENT_NODE
case 9: // DOCUMENT_NODE
case 10: // DOCUMENT_TYPE_NODE
case 11: // DOCUMENT_FRAGMENT_NODE
case 12: // NOTATION_NODE
// skip
break;
}
i++;
}
return _result;
}
// para la ordenacion
var up = false;
// funcion principal
function sort(e) {
var el = window.event ? window.event.srcElement : e.currentTarget;
if (el.tagName == "IMG") el = el.parentNode;
var a = new Array();
var name = el.lastChild.nodeValue;
var dad = el.parentNode;
var node, arrow, curcol;
/*solo se verifica la columna 3 y 4. En otras palabras, desde la columna 2 hasta el final*/
for (var i = 2; (node = dad.getElementsByTagName("td").item(i)); i++) {
if (node.lastChild.nodeValue == name){
curcol = i;
if (node.className == "curcol"){
arrow = node.firstChild;
up = Number(!up);
arrow.src = img_dir + up + ".gif";
}else{
node.className = "curcol";
arrow = node.insertBefore(document.createElement("img"),node.firstChild);
up = false;
arrow.src = img_dir + Number(up) + ".gif";
}
}else{
if (node.className == "curcol"){
node.className = "";
if (node.firstChild) node.removeChild(node.firstChild);
}
}
}
var tbody = dad.parentNode.parentNode.getElementsByTagName("tbody").item(0);
for (var i = 0; (node = tbody.getElementsByTagName("tr").item(i)); i++) {
a[i] = new Array();
a[i][0] = getConcatenedTextContent(node.getElementsByTagName("td").item(curcol));
a[i][1] = getConcatenedTextContent(node.getElementsByTagName("td").item(1));
a[i][2] = getConcatenedTextContent(node.getElementsByTagName("td").item(0));
a[i][3] = node;
}
a.sort();
if (up) a.reverse();
for (var i = 0; i < a.length; i++) {
tbody.appendChild(a[i][3]);
}
}
// funcion de inicializacion de todo el proceso
function init(e) {
if (!document.getElementsByTagName) return;
var thead = document.getElementsByTagName("thead").item(0);
var node; /*i=2 para ordenar solo la columna 3 y 4. Si quieres que ordene todas las columnas, pon 0*/
for (var i = 2; (node = thead.getElementsByTagName("td").item(i)); i++) {
if (node.addEventListener) node.addEventListener("click", sort, false);
else if (node.attachEvent) node.attachEvent("onclick",sort);
node.title = "Haga click para ordenar la columna";
}
thead.getElementsByTagName("td").item(3).click(); // se simula un click en la 4ta colummna. En NN6/Mozilla no funciona.
}
// se ejecuta la funcion init() cuando ocurre el evento Load
var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
if (root){
if (root.addEventListener) root.addEventListener("load", init, false);
else if (root.attachEvent) root.attachEvent("onload", init);
}
//-->
</script>
</head>
<body>
<table class="sort" align="center">
<thead>
<tr>
<td>Id Grabacion</td>
<td>Id Ejecutivo</td>
<td>Fecha grabacion</td>
<td>Duracion grabacion</td>
</tr>
</thead>
<tbody>
<tr>
<td>G01</td>
<td>E01</td>
<td>15-05-2005</td>
<td>8</td>
</tr>
<tr>
<td>G02</td>
<td>E02</td>
<td>20-06-2005</td>
<td>7</td>
</tr>
<tr>
<td>G03</td>
<td>E03</td>
<td>11-08-2005</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>
Otro problema de este script, es que esta hecho para ordernar todas las columnas de la tabla. Esto se puede solucionar facilmente.
Código:
var cols = new Array(2,3); //3ra y 4ta columna
for (var k = 0; k<cols.length; k++)
for (var i = cols[k]; (node = thead.getElementsByTagName("td").item(i)); i++)
{
}
Se que parece que complicado, pero quizas a alguien mas le puede ser util.
Si tienes alguna pregunta sobre este codigo, no dudes en hacerla.
suerte