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
Es un Script que se distribuye en un archivo .js y que mediante JavaScript permite la ordenación de tablas. Características que destaco:
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:
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.).
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.
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.
Observa cómo queda finalmente la tabla y saca tus propias conclusiones:
Mensajes de Windows |
Hexadecimal |
Decimal |
Observaciones |
---|---|---|---|
WM_NULL | 0x0000 | 0 | Ordena |
WM_CREATE | 0x0001 | 1 | aquesta |
WM_DESTROY | 0x0002 | 2 | columna |
Referencia y página Web de Table Sort: http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited