Si alguna vez teniais pensado crear una tabla ordenada, TableSorter es la solución. Algunas de las ventajas son:

  • Sencillo de implementar
  • No hace falta refrescar la página para que se ordene.
  • Puede ordenadr por tipos de datos como:
    • Texto
    • Números
    • Monedas
    • Fechas
    • etc …
  • Tiene muchas opciones de personalización y ampliación.

Seguramente te bastan todas estas ventajas, así que vamos a ver como lo podemos implementar.

Como siempre lo primero que tendremos que hacer es descargarnos las librerías correspondientes:

Una vez descargados, tendremos que hacer la llamada a esas librerías entre las etiquetas "head" de la página.

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

Una vez echa la llamada, crearemos una tabla, que en este caso seria esta:

PLAIN TEXT
HTML:
  1. <table id="tablasort" cellpadding="0" cellspacing="0">
  3. <th>Usuario</th>
  4. <th>e-mail</th>
  5. <th>Edad</th>
  6. <th>Profesion</th>
  7. <th>Url/Blog</th>
  8. <td>Curious</td>
  9. <td>curious@gmail.com</td>
  10. <td>34</td>
  11. <td>Webmaster</td>
  12. <td>http://www.nosfaltauno.es</td>
  13. <td>Papilous</td>
  14. <td>papilous@gmail.com</td>
  15. <td>21</td>
  16. <td>Carretillero</td>
  17. <td>http://www.nosfaltauno.com</td>
  18. <td>Colorate</td>
  19. <td>colorate@gmail.com</td>
  20. <td>29</td>
  21. <td>Bloguer</td>
  22. <td>http://www.colordeu.es/Blog</td>
  23. <td>Pingui</td>
  24. <td>pingui@gmail.com</td>
  25. <td>40</td>
  26. <td>Diseñador Gráfico</td>
  27. <td>http://www.colordeu.es</td>
  28. <td>Ursixs</td>
  29. <td>ur100@hotmail.com</td>
  30. <td>17</td>
  31. <td>Estudiante</td>
  32. <td>http://www.nfu.es</td>
  33. </tr>
  34. </table>

Si os fijáis le he puesto un identificador que se llama “tablasort”. Este es muy importante, ya que será con lo que haremos la llamada. Y también, hay que tener en cuenta, que tenemos que tener bien especificadas las etiquetas “THEAD” y “TBODY”.

Ahora nos queda indicarle al plugin que tabla queremos que tenga la opción de ser ordenada:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function()
  2. {
  3. $("#tablasort").tablesorter();
  4. }
  5. );

Podeis ver un ejemplo aqui.
O bien descargarlo

Posts Relacionados