TableSorter jQuery Plugin

TableSorter es un plugin para jQuery que te pemitirá convertir las tradicionales tablas de datos en tablas interactivas con la posibilidad de ordenar los datos por columnas y todo ello con pocas líneas de código.

Entre las características mas destacables tenemos: ordenamiento por múltiples columnas, interpreta y ordena por texto, URLs, enteros, moneda, números flotantes, direcciones IP, fecha, hora entre otros. Adicionalmente es soportado en la mayoría de browsers (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+).

Utilizando TableSorter
Para utilizar esta librería lo primero es descargar la ultima versión de jQuery y luego el archivo jquery.tablesorter.js. Luego de ello incluimos estas librerías en el header de nuestro HTML.

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/jquery.tablesorter.js"></script>

Lo siguiente es incluir nuestra tabla de forma normal, teniendo cuidado en asignarle un identificador y utilizar los tags thead y tbody para separar los títulos del contenido en la tabla como se muestra a continuación.

  1. <table id="myTable">
  2. <tr>
  3.     <th>Last Name</th>
  4.     <th>First Name</th>
  5.     <th>Email</th>
  6.     <th>Due</th>
  7.     <th>Web Site</th>
  8. </tr>
  9. <tr>
  10.     <td>Smith</td>
  11.     <td>John</td>
  12.     <td>jsmith@gmail.com</td>
  13.     <td>$50.00</td>
  14.     <td>http://www.jsmith.com</td>
  15. </tr>
  16. <tr>
  17.     <td>Bach</td>
  18.     <td>Frank</td>
  19.     <td>fbach@yahoo.com</td>
  20.     <td>$50.00</td>
  21.     <td>http://www.frank.com</td>
  22. </tr>
  23. <tr>
  24.     <td>Doe</td>
  25.     <td>Jason</td>
  26.     <td>jdoe@hotmail.com</td>
  27.     <td>$100.00</td>
  28.     <td>http://www.jdoe.com</td>
  29. </tr>
  30. <tr>
  31.     <td>Conway</td>
  32.     <td>Tim</td>
  33.     <td>tconway@earthlink.net</td>
  34.     <td>$50.00</td>
  35.     <td>http://www.timconway.com</td>
  36. </tr>

Para finalizar hacemos un llamado a la función tablesorter indicando mediante el identificador a que tabla le aplicamos el ordenamiento.

  1. <script type="text/javascript">
  2. $(document).ready(function()
  3.     {
  4.         $("#myTable").tablesorter();
  5.     }
  6. );

Con esto ya tenemos nuestra tabla con las opciones para ordenar, obviamente lo que le hace falta es aplicarlo estilos para mejorar la apariencia con lo cual logramos obtener un buen resultado como el mostrado a continuación.

Obviamente este plugin tiene muchas opciones adicionales como definir ordenamientos iniciales, funciones para llamar al ordenamiento desde otros elementos entre otros, todo ello muy detallado y con ejemplos en el web original de TableSorter. Sin duda esta será una herramienta para mejorar la interactividad con la información que deseamos mostrar en nuestros webs.

Comentarios Total 9 comentarios


Enrique
Publicado: 09/07/2009 12:32 pm

La información esta genial, pero tengo una duda, se puede ordenar una tabla generada en php con datos de mysql o cualquier otra base de datos???


[…] October 2008 | 1 comentario | AJAX, General, HTML, Javascript, […]

Z
Publicado: 26/04/2010 3:48 pm

da lo mismo la base de datos y el lenguaje con que fue generado, que no leiste que es para HTML?

elo950
Publicado: 04/05/2010 4:23 pm

excelente la info, ahora alguien sabe como ordenar con estilo millares? no encontre en la documentacion ni gogleando

Edwin
Publicado: 25/05/2010 4:25 pm

Sí se puede con consultas a MySQL:

$reg=mysql_fetch_array($result);
echo ‘

Tipo
Nombre
Ultimo

‘;
do {
echo ‘
‘.$reg[“tipo_documento”].’
‘.$reg[“resolucion”].’
‘.$reg[“ultimo_emitido”].’
‘;
} while ($reg = mysql_fetch_array($result));
echo ‘
‘;

Pedro
Publicado: 03/07/2010 7:19 pm

que grosero Z, obviamente el compañero que pregunta lo hace sin afan de ofende y si es muy simple el cuestionamiento si quieres ayudar asi deberias hacerlo de otro forma evitemos comentarios de ese tipo.
excelnte post por otra parte, ayuda mucho este sorter.
saludos!!

luis
Publicado: 28/05/2011 6:45 pm

una duda, no me salen las flechitas deordenamiento, ¿tengo que agregar algo mas para que me aparescan?

muchas gracias

Jose Antonio Pérez Sanjosé
Publicado: 03/02/2012 4:39 am

Para que aparezcan las flechas se deben agregar los estilos a las siguientes clases:
th.header: Para aplicarle estilos a la cabecera de la tabla.
th.headerSortDown: Para aplicar estilos a la cabecera de la columna ordenada de forma descendiente.
th.headerSortUp: Para aplicar estilos a la cabecera de la columna ordenada de forma ascendiente.

Ejemplo:

th.header {
background:#DDD url(img/arriba_abajo.png) center left no-repeat;
color: #000;
/*Cambio de cursor(dedo) */
cursor: pointer;
padding-left: 20px;
padding-right: 20px;

}

th.headerSortDown {
background-image: url(img/abajo.png);
background-color: #BC1029;
color: #FFF;
}

th.headerSortUp {
background-image: url(img/arriba.png);
background-color: #BC1029;
color: #FFF;
}

Puedes verlo en mi blog: http://jpsprogramacion.es/?p=89

wilson
Publicado: 16/05/2012 5:23 pm

puedes colocar un ejemplo consultado una bd cpn jsp, estoy haciendo el ejemplo con datos estaticos y me funciona, cuando intento leyendo de una BD me carga los datos pero no me ordena ni pagina.. gracias

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)