Joomla!: Ordenar tablas con JavaScript

Tablas ordenadas y JavaScript

Hace unos días quise incluir en un artículo una sencilla tabla que se pudiera ordenar, y la verdad que empecé a encontrar muchos problemas: la mayoría de extensiones son de pago, existen librerías en JavaScript que, en algunos casos, hay que estudiar una licenciatura para saber manejarlas y otras no he conseguido que funcionen correctamente. Después de unas cuántas pruebas os dejo mi resultado.

No es algo sencillo y la principal ayuda está toda en inglés, pero después de testear varios componentes me quedo (de momento, y a día de hoy) con Table Sort. Pienso que el resultado final es bastante profesional y te voy a generar un esqueleto para que puedas crearte las tuyas propias.

Su página web es (a fecha de actualización de este artículo ha desaparecido): http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited

¿Qué es Table Sort?

Es un Script que se distribuye en un archivo .js y que mediante JavaScript permite la ordenación de tablas. Características que destaco:

• Es muy rápido
• Aunque en inglés, en el enlace anterior tienes mucha documentación
• Puedes ordenar múltiples columnas al mismo tiempo, pulsando la tecla Shift y cliqueando en las columnas deseadas
• Se puede alternar los colores de cada fila
• Permite la ordenación de varios tipos de entradas de datos.
• Permite paginación. Imagina una competición de ciclismo, con perfiles, distancias, recorridos etc...
• Dicho script está liberado bajo licencia creative commons Attribution-ShareAlike 2.5 license
• Testeado en los principales navegadores (incluso en IE6)
• Y muchas características más que puedes ver en el enlace anterior.

Usarlo en Joomla!

Para poder usarlo en Joomla! yo voy a seguir estos dos pasos siguiente. Es posible que tu editor WYSIWYG no te permita incorporar scripts y te los borre. Tal vez necesites desactivar tu editor predeterminado y trabajar directamente con código HTML:

• Voy a añadir un estilo CSS que completará al estilo por defecto de la template. Lo cargaré con Javascript. Esto lo hago así porque como para ordenar tablas se necesita Javascript, pues el archivo CSS solo será cargado cuando el usuario lo habilite. ¿Cómo se carga un archivo CSS desde javascript? Aquí lo explico.
• Hay que instalar el script, el archivo tablesort.js. La W3C nos permite llamar al script tanto desde el elemento head, como body. (The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.).

Instalación del script

Vamos directamente al código y al grano. En un artículo, desde el código HTML pongo lo siguiente:

<script type="text/javascript">// <![CDATA[
if(document.createStyleSheet) {
document.createStyleSheet('http://...mi_archivo_de_estilo.css');
}
else {
var styles = "@import url(' http://...mi_archivo_de_estilo.css');";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
// ]]></script>
<script type="text/javascript" src="/...tablesort.js"></script>

De este modo, ya tenemos los estilos y la instalación del script. Sólo queda construir la tabla.

Para evitar tanto código y usar solo la llamada a un archivo script, puedes añadir el código que carga el archivo .css al archivo javascript "tablesort.js". Y con una línea lo solucionas todo y no hace falta escribir el código anterior.

Contruir la tabla

La tabla debe seguir un formato, que es para el que está diseñado el script. No debes construir una tabla HTML de cualquier forma. Yo te voy a generar una que en el futuro te servirá de esqueleto para crear las tuyas propias. El código HTML es el siguiente:

 
<table id="ejemplo"
class="tabla sortable-onload-0 rowstyle-alt colstyle-alt  no-arrow">
<caption>Título de la tabla</caption>
<thead>
<tr>
 <th class="sortable-text">
  <h3>Mensajes de Windows</h3>
 </th>
 <th>
  <h3>Hexadecimal</h3>
 </th>
 <th class="sortable-numeric">
  <h3>Decimal</h3>
 </th>
 <th class="sortable-text">
  <h3>Observaciones</h3>
 </th>
</tr>
</thead>
<tbody>
<tr>
 <td>WM_NULL</td>
 <td>0x0000</td>
 <td>0</td>
 <td>Ordena</td>
</tr>
<tr>
 <td>WM_CREATE</td>
 <td>0x0001</td>
 <td>1</td>
 <td>aquesta</td>
</tr>
<tr>
 <td>WM_DESTROY</td>
 <td>0x0002</td>
 <td>2</td>
 <td>Columna</td>
</tr>
</tbody>
</table>
 

Como puedes observar, la tabla lleva una serie de parámetros. Por ejemplo, sortable-text ordena por texto. Si no quieres que una columna se pueda ordenar (ver columna hexadecimal) no añadas "sortable". Todos los demás datos vienen especificados en el enlace del principio.

Ejemplo FINAL

Observa cómo queda finalmente la tabla y saca tus propias conclusiones:

Referencias

Referencia y página Web de Table Sort: http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited

No tiene privilegios para responder a los comentarios.