101 - Ordenar campos de una tabla segun columna P. ¿Cómo puedo ordenar los datos de una tabla dependiendo de cada columna?
R. Muy sencillo, consta de dos pasos.
1º Añade este Script en el head
Código PHP:
<SCRIPT LANGUAGE="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)
{
// 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(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>
2º Paso: Crear la tabla
Código PHP:
//indicar el número de columnas, teniendo cuidado de que no haya colspan
<table name="rsTable" id="rsTable" cols=6>
<tr><td><A href="java script:sortTable(0, rsTable">ID</A></td>
<td><A href="java script:sortTable(1, rsTable);">Nombre</A></td>
<td><A href="java script:sortTable(2, rsTable);">Apellidos</A></td>
//etc...
Y lo demás depende de ustedes.
