ayuda con la FAQ #101, ordenar los datos de una tabla dependiendo de cada columna

Dorita · #1 (**permalink**) 07/11/2005, 09:57

Hola a todos, q tal?

Les escribo por q tengo una duda: necesito ocupar el método en javascript q permite ordenar los registros de una tabla dependiendo de cada columna (FAQ n# 101), pero reconozco q se me fue en collera ...

...y no lo puedo implementar.... está comentado en inglés, para mi mayor desgracia... tengo las siguientes columnas a ordenar: una columna de fecha, y otra de tiempo (duración de la grabación)...alguien sería tan amable de explicarme a grandes rasgos y en forma muy genérica cómo se implementa?

gracias de antemano, salu2.-

Dorita · #2 (**permalink**) 07/11/2005, 13:55

Reformulo mi pregunta: ya implementé el sistema de ordenamiento de la FAQ #101, pero no me funciona...si presiono el link de la columna fecha por ejemplo, se desaparecen todos los registros q estaba listados anteriormente y me muestra toda la página pero sin los registros... aqui les pongo el codigo q tengo:

esto en el head de mi página:

Código PHP:

  <Script language="javascript" type="text/javascript">        

<!-- Begin

function compare(sVal1, sVal2){  // para cambiar el orden (ascendente o descendente) se debe cambiar a negativo el primer 1 y a positivo el segundo, segun convenga

if (sVal1 < sVal2) return 1;

if (sVal1 > sVal2) return -1;

return 0;

} 

 
 
function setDataType(cValue)  // Esta función convierte fechas y numeros para el array apropiado clasificando en la función sort.

  {

    var isDate = new Date(cValue);

    if (isDate == "NaN")

      {

        if (isNaN(cValue)) //El valor es un string, pone todos los caracteres en upper case(mayúsculas) para asegurar un correcto

                            // ordenamiento de la a - z.

          {

            cValue = cValue.toUpperCase();

            return cValue;

          }

        else // si el valor es un numero, para prevenir el ordenamiento string de un numero se le agrega un dígito adicional q es 

                // la suma del largo del numero cuando es un string.

          {

            var myNum;

            myNum = String.fromCharCode(48 + cValue.length) + cValue;

            return myNum;

          }

        }

  else

      {

          // si el valor a ordenar es una fecha, remueve toda la puntuación y retorna un numero string

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

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

                        }

          }

    }

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

    }

  }

//  End -->

 
</Script>

y en la tabla:

Código HTML:

<table name="rsTable" id="rsTable" border="1" align="center">
	<tr>
	<th width="16%" height="36" scope="col"><span class="estiloTablas">Id Grabaci&oacute;n</span></th>
	<th width="6%" scope="col"><span class="estiloTablas">Id Ejecutivo</span></th>
	<th width="13%" scope="col"><span class="estiloTablas"><a href="javascript:sortTable(0, rsTable);">Fecha grabaci&oacute;n</a></span><br></th>
</table>
alguna ayuda????   :'( 


salu2.-:adios:

flaviovich · #3 (**permalink**) 07/11/2005, 19:40

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

Dorita · #4 (**permalink**) 08/11/2005, 07:06

Muchas gracias flaviovich por el script, se ve un poco complicada la tarea, mas aun con lo poco y nada que se de javascript,

pero voy a implementarlo y te cuento.-
salu2.-

Dorita · #5 (**permalink**) 08/11/2005, 09:32

Hola flaviovich, m fue mas o menos no mas...

... lo implementé pero no me funciona nada... esto es lo q tengo, solo le cambié la ruta de la carpeta donde estan las imágenes 0.gif y 1.gif :

esto en el head:

Código PHP:

   
<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 language="javascript" 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 = "imagenes/"; // 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);

}

//-->

Código HTML:

<table class="sort" border="1" align="center">
			<tr>
		   		<th width="16%" height="36" scope="col"><span class="estiloTablas">Id Grabaci&oacute;n</span></th>
			   	<th width="6%" scope="col"><span class="estiloTablas">Id Ejecutivo</span></th>
		    	<th width="13%" scope="col"><span class="estiloTablas">Fecha grabaci&oacute;n</span><br></th>
		   		<th width="13%" scope="col"><span class="estiloTablas">Duración  Grabaci&oacute;n</span><br></th>
			  	<th width="12%" scope="col"><span class="estiloTablas">Ip Grabaci&oacute;n</span></th>
		  		<th width="12%" scope="col"><span class="estiloTablas">Estado</span></th>
				<th width="9%" scope="col"><span class="estiloTablas">Link Grabaci&oacute;n</span></th>
				<th width="9%" scope="col"><span class="estiloTablas">Descargar Grabaci&oacute;n</span></th>
		  	</tr>

... 				
</table>

y no funciona nada...q estoy haciendo mal?

Dorita · #6 (**permalink**) 08/11/2005, 13:23

y ahora..quien podrá defenderme???

Dorita · #7 (**permalink**) 09/11/2005, 07:18

ninguna sugerencia? al menos? ...

flaviovich · #8 (**permalink**) 09/11/2005, 14:04

A ver, prueba con esto:

Código HTML:

<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

// Esta funcion convierte fechas y numeros para el array apropiado clasificando en la funcion sort. 
function setDataType(cValue)
{ 
	var isDate = new Date(cValue); 
	if (isDate == "NaN") 
	{ 
		if (isNaN(cValue)) //El valor es un string, pone todos los caracteres en upper case(mayusculas) para asegurar un correcto 
							// ordenamiento de la a - z. 
		{ 
			alert(cValue)
			cValue = cValue.toUpperCase(); 
			return cValue; 
		} 
		else // si el valor es un numero, para prevenir el ordenamiento string de un numero se le agrega un digito adicional q es 
			// la suma del largo del numero cuando es un string. 
		{ 
			var myNum; 
			myNum = String.fromCharCode(48 + cValue.length) + cValue; 
			return myNum; 
		} 
	} 
	else 
	{ 
		 // si el valor a ordenar es una fecha, remueve toda la puntuacion y retorna un numero string 
		//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 ; 
	} 
}
  
// 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 3 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][0] = setDataType(a[i][0]); //uso de la funcion insertada en este script
        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-11-2005</td>
<td>8</td>
</tr>
<tr>
<td>G02</td>
<td>E02</td>
<td>01-12-2005</td>
<td>7</td>
</tr>
<tr>
<td>G03</td>
<td>E03</td>
<td>11-11-2005</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>

Dorita · #9 (**permalink**) 10/11/2005, 07:18

Hola flaviovich, sabes, el código lo implementé exactamente como tu me lo diste, sólo cambié la carpeta desde donde vienen las imágenes, pero no pasa nada...

no aparecen las imágenes 0.gif y 1.gif, pero tengo una duda: las imágenes debo insertarlas en la tabla, en las cabeceras de los campos que quiero ordenar, o debo dejarlas que aparezcan con el código javascript?
disculpa mi ignorancia, pero der javascript se poco y nada, y la ordenación la necesito para un sistema que estoy haciendo en mi trabajo...
gracias por tu ayuda, salu2.-

Nota: я могу прочитать ваше сообщение, но как раз с babelfish... я огорченн ...

flaviovich · #10 (**permalink**) 10/11/2005, 07:50

Fijate en este ejemplo.
Solo en Opera, por algun motivo no muestra las imágenes.

Так что, ты говоришь по-русски?

Dorita · #11 (**permalink**) 10/11/2005, 08:42

Hola flaviovich..parece q encontré el error: las celdas de esta tabla las muestro con Response.write... por eso la función de ordenar busca los td y no los encuentra...(esperemos que sea eso). gracias por el ejemplo, lo modifico y t cuento como me fue.-
salu2 y gracias nuevamente.-

Nota: нет, я не поговорить русско, как раз испанско и английско, но я умею как использовать babelfish altavista...

хотя оно заколдовало бы к мне выучить его, очень милый язык...

Dorita · #12 (**permalink**) 10/11/2005, 09:30

Claro, ese era el problema, que los td los estaba escribiendo con response.write, ahora lo cambié y funciona ok. ahora flaviovich, quiero abusar de tu paciencia: el problema es q me da la opcion de listar las columnas de la 3 en adelante, y yo solo quiero listar la columna 3 y 4, nada mas. traté de cambiarle el código a esta bucle, por que si no me equivoco ahi va la opción de cuantos td recorrer, pero no m funciono:

Código PHP:

  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++) {

     ...

que hay que ponerle en vez de esto?

Código PHP:

  (node = thead.getElementsByTagName("td").item(i))

y una última consulta: la ordenación de fechas no ordena como fecha, si no como números, y la ordenación por duración de grabación tb, por lo que por ejemplo entre las duraciones de las grabaciones aparece :

2
334
3
452
4

se puede arreglar?

muchisimas gracias por toda tu ayuda

salu2.-

flaviovich · #13 (**permalink**) 10/11/2005, 19:41

Listo!
http://study.madi.ru/flaviovich/post347948.htm
Solo hay unos pequeños problemas de compatibilidad con los browsers.
En IE funciona muy bien. En Opera, un grafico no muestra y no se marca inicialmente la columna. En FF y NN, la ordenación no funciona como se debe.

Bueno, si necesitas algo mas, ya sabes: aquí me encuentras las 24 horas

Dorita · #14 (**permalink**) 15/11/2005, 09:03

Muchisimas gracias flaviovich, eres un 7!!!!!

te agradesco enormemente la ayuda, y disculpa si no te he agradecido antes pero mi pc murio hace unos dias y acaba de revivir...jajaja...
esperando ayudarte apenas se me presente la oportunidad, salu2.-