Hola otra vez:
Te he preparado esta página:
http://www.pepemolina.com/pruebas/ordenarArrays.html
Si no quieres entrar pongo aquí el contenido:
Código:
<html>
<head>
<script type="text/javascript">
var destripe = ["apellidos", "nombre", "direccion", "sueldo"];
function empleado(apellidos, nombre, direccion, sueldo) {
this.apellidos = apellidos;
this.nombre = nombre;
this.direccion = direccion;
this.sueldo = sueldo;
}
Array.prototype.ordenar = function(esto) {
var yo = this;
for (var i = 0, mayor = yo.length - 1; i < mayor; i ++)
for (var j = i + 1; j < yo.length; j ++)
if (yo[i][esto] < yo[j][esto]) {
temp = yo[i];
yo[i] = yo[j];
yo[j] = temp;
}
return yo;
}
var empleados = new Array();
empleados[0] = new empleado("Molina", "Pepe", "Torremolinos", 100000000000);
empleados[1] = new empleado("García", "Paco", "Madrid", 100000000);
empleados[2] = new empleado("Sánchez", "Alberto", "Barcelona", 1000000000);
var ordenado = "";
var ascendente = "▼";
var descendente = "▲";
var neutro = " ";
var ordenAscendente = true;
function ordenando(datos) {
if (datos == ordenado) {
ordenAscendente = !ordenAscendente;
empleados = empleados.reverse();
document.getElementById("span" + datos).innerHTML = (ordenAscendente) ? descendente : ascendente;
}
else {
if (ordenado != "")
document.getElementById("span" + ordenado).innerHTML = neutro;
ordenado = datos;
empleados = empleados.ordenar(ordenado);
document.getElementById("span" + datos).innerHTML = descendente;
ordenAscendente = true;
}
var filas = document.getElementById("tabla").getElementsByTagName("tbody")[0].getElementsByTagName("tr");
for (var i = 0; i < filas.length; i ++) {
estaFila = filas[i];
for (var j = 0; j < estaFila.cells.length; j ++)
filas[i].cells[j].innerHTML = empleados[i][destripe[j]];
}
}
</script>
</head>
<body >
<table id="tabla" style="width: 100%;" border=1 >
<thead>
<tr>
<script type="text/javascript">
for (var i = 0; i < destripe.length; i ++) {
escribir = "<th style='width: 25%; background-color: #eeeeee; color: gray;' onclick=ordenando('" + destripe[i] + "') > ";
escribir += destripe[i];
escribir += " <span id='span" + destripe[i] + "' > ";
escribir += (destripe[i] == ordenado) ? ascendente : neutro;
escribir += " </span> </th>";
document.write(escribir);
}
</script>
</tr>
</thead>
<tbody>
<script type="text/javascript">
for (i = 0; i < empleados.length; i ++) {
document.write("<tr>");
for (var j = 0; j < destripe.length; j ++)
document.write("<td >" + empleados[i][destripe[j]] + "</td>");
document.write("</tr>");
}
</script>
</tbody>
</table>
</body>
</html>
Supongo que las filas de cada tabla las recogerás de una base de datos...
...
Si es así, para que funcione bien el script tendrías que crear los objetos en el head y luego tan solo hacer las variaciones que consideres oportunas en el diseño (colores y esas cosas)
<script >
var empleados = new Array();
<?php
for ($i = 0; $i < count($rows); $i ++) {
echo "\nempleados[$i] = ['$rows[$i][apellido]', ";
echo "'$rows[$i][nombre]', ";
echo "'$rows[$i][direccion]', ";
echo "'$rows[$i][sueldo]'];";
}
?>
En php me parece que es algo así, pero ese tratamiento, seguro que tú lo sabes mejor que yo (también depende del lenguaje que uses en el servidor).
Saludos
