Joomla!: Ordenar tablas con JavaScript

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:

  • 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:

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
Comentarios  
0 # totxi 30-03-2013 09:46
Hola Karmany,
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?
0 # Javier 30-03-2013 10:55
Hola!
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
0 # totxi 05-04-2013 01:42
Hola Javier,
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.
0 # Javier 05-04-2013 03:12
El código de script lo tienes que escribir directamente en el artículo que estás escribiendo. Observa, por ejemplo, el código de este artículo con Firebug o con las herramientas para desarrolladores de Chrome, verás que el script está insertado en el artículo. Puedes ver la siguiente imagen del mismo:
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.
0 # totxi 05-04-2013 04:09
Gracias Javier,
Voy a probarlo, y si no me voy al sobre, y mañana a la tarde seguimos.
Gracias
0 # karmany 05-04-2013 04:19
Hola totxi. En estos momentos no puede ser porque ando liado y tenía pensado hacerlo a finales de año, pero tal vez en un mes lo programe...
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.

No tiene privilegios para responder a los comentarios.


 
Visitas: 8562252