Joomla!: Ordenar tablas con JavaScript

Creado: Martes, 19 Junio 2012 Escrito por karmany Visto: 7734
Tamaño de letra:

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:

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:

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:

Título de la tabla

Mensajes de Windows

Hexadecimal

Decimal

Observaciones

WM_NULL 0x0000 0 Ordena
WM_CREATE 0x0001 1 aquesta
WM_DESTROY 0x0002 2 columna

Referencias

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

Última actualización: Martes, 11 Febrero 2014