Ordenar tablas mediante Javascript

A la hora de mostrar tablas, el orden por el cual está ordenada puede ayudarnos a ver con mayor facilidad la información que contiene, ordenada por distintas columnas pueder revelar diferentes aspectos sobre los datos que almacena.
En el caso de que la tabla se genere dinámicamente (consulta a una BD y mostrándola mediante una JSP o una página PHP), cuando se quiere volver a ordenar la tabla por otra columna, se vuelve a cargar la página para que la tabla se actualice. Cuando se trata de una página estática se debería cargar otra página distinta. Todo esto no es necesario si se realiza la ordenación mediante Javascript.

Mostrar resto >>

<< Ocultar resto
Antes de nada, hay que tener en cuenta que este tipo de ordenación de tablas solo se debe hacer cuando se muestran todos los registros, cuando no hay paginación de resultados, ya que cuando se reordena una tabla paginada, los datos que actualmente se muestran, pueden estar en páginas posteriores una vez se ha aplicado el orden.
El método que vamos a usar es sencillo, los datos de la tabla los vamos a meter en un array de arrays, luego dibujaremos la tabla dinámicamente (usando un DIV y el innerHTML) y luego mediante la capacidad que ofrece Javascript para ordenar arrays, mostraremos la tabla según el criterio que queramos.
Necesitamos tres variables globales: una de ella contendrá los datos de la tabla, otra el índice de la columna por la que se ordena y la última si el orden es ascendente o descendente:

    var orden = 0;     var ascendente = true;     var datos = new Array();         datos[0] = new Array('Andalucía ', 7340052, 7849799);         datos[1] = new Array('Aragón ', 1189909, 1269027);

Pasemos ahora a las funciones, la primera de ellas es la que se encarga de cmabiar el criterio de orden, según el índice que se pasa por parámetro, si es el mismo que el que ya estaba, se cambia el sentido (ascendente/descendente) y si no es así, se cambia el indice y se pone el sentido como ascendente.

    // Cambia el criterio de orden     // y vuelve a dibujar la tabla     function cambiar(ind) {         // Si es el mismo orden         // que el que hay actualmente         // se cambia el sentido.         // En otro caso, se cambia el         // criterio y se pone el sentido         // como ascendente         if (ind == orden) {             ascendente = !ascendente;         } else {             orden = ind;             ascendente = true;         }                  // Se refresca la tabla         dibujarTabla();     }

La siguiente función es la que se usa en el método de ordenación, se pasa como parámetro a la función sort y tiene como parámetros dos elementos del array que se ordena. Devuelve 1 para el elemento mayor y -1 para el menor.

    // Es la función para ordenar el array     // con los datos, tiene en cuenta la columna     // y si es ascendente o no     function organizar(a, b) {         var signo = ascendente? 1:-1;         return (a[orden] > b[orden]) ? signo : -signo;     }

Por último la función que dibuja la tabla, simplemente crea el código HTML necesario y lo inserta usando innerHTML en un div que tiene el id=tabla.

// Se encarga de dibujar la tabla     function dibujarTabla() {              var html = "<table>";                  // Cabecera         // En cada celda de la cabecera         // se le añade un evento para que         // cuando se pulse en ella se cambien         // el criterio de orden y tambien una         // imagen que indica el orden de cada         // columna         html += '<tr><th onclick="cambiar(0)">';         html += 'Comunidad/Ciudad Autónoma <img src="';         html += ((orden == 0)?             (ascendente? 'ord-asc.gif':'ord-des.gif'):             'ord-no.gif');         html += '"></th>';         html += '<th onclick="cambiar(1)">';         html += 'Habitantes (2000) <img src="';         html += ((orden == 1)?             (ascendente? 'ord-asc.gif':'ord-des.gif'):             'ord-no.gif');         html += '"></th>';         html += '<th onclick="cambiar(2)">';         html += 'Habitantes (2005) <img src="';         html += ((orden == 2)?             (ascendente? 'ord-asc.gif':'ord-des.gif'):             'ord-no.gif');         html += '"></th></tr>';                  // Se ordena la tabla         datos.sort(organizar);              // Por cada fila se escribe         // el codigo HTML necesario         for (var i=0; i<datos.length; i++) {             html += '<tr><td>'+datos[i][0]+                 '</td><td>'+datos[i][1]+                 '</td><td>'+datos[i][2]+                 '</td></tr>';         }                  html += '</table>';                  // Necesita un DIV con id=tabla         document.getElementById("tabla").innerHTML = html;     }

Podéis bajaros un ejemplo aquí: ARCHIVO