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:
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
Me interesa tu articulo sobre ordnar tablas, es lo que quiero, deseo y necesito.
Por mucha horas que le deique no consigo avanzar, me faltan conocimientos de css, html y de muchas otras cosas, pero no consigo incluir esos codigos, en los articulos diseñados en joomla, ni en las plantillas.
Necesito ayuda desde el nivel 0. por ejemplo como pongo un codigo html?
Para insertar código HTML en un artículo y que no sea modificado te recomiendo que cambies tu editor. Aquí está bien explicado:
www.karmany.net/index.php/programacion-web/27-joomla/176-insertar-html-en-un-articulo-en-joomla
Gracias por el link al articulo del editor de código HTML, aprendido, ya empezaba a perder la esperanza.
Ahora a por el código del script en que fichero lo incluyo? que es eso de direcciones absolutas? donde las obtengo?
Gracias por tu paciencia y comprensión.
Totxi
Aprendiendo a golpres.
oi47.tinypic.com/23rwdon.jpg
La primera parte del script, carga el archivo CSS y la segunda el script.
Para evitarte posibles equivocaciones, por la ruta completa, como te he mostrado en la imagen.
Voy a probarlo, y si no me voy al sobre, y mañana a la tarde seguimos.
Gracias
Gracias a tu mensaje y debido a que puede haber problemas de configuración, me comprometo con este mensaje a crear un sencillo plugin que te añada el archivo CSS y el archivo JS a un artículo.
Pero necesito algo de tiempo. Ahora mismo me lo anoto en "mi libreta" de cosas pendientes.
gracias por comentar, por darnos tu voto en nuestra red social y te invito a que pases dentro de un mes y me vuelvas a preguntar por esto (para que no se me olvide).
Buen día.