Saltar al contenido

Jquery TableSorter

A la hora de construir cualquier p谩gina web es muy com煤n encontrarnos con la necesidad de incluir tablas para mostrar informaci贸n, HTML nos proporciona el elemento TABLE con el cual podemos mostrar la informaci贸n de esta forma. Mediante CSS podemos 鈥榯unear鈥 la tabla cambiando colores, tama帽os, estilos, bordes鈥

Jquery TableSorter

TableSorter es una librer铆a javascript que apoy谩ndose en Jquery nos proporciona la funcionalidad hacer ordenable cualquier tabla escrita con HTML, es decir, pinchando sobre la cabecera de las columnas los datos que estan por debajo se ordenan de manera ascendente o descendente.

CARACTER脥STICAS:

  1. Permite crear tablas ordenables a partir de una tabla HTML est谩ndar. Se hace clic sobre las cabeceras de cada columna para ordenar.
  2. Posibilidad de ordenaci贸n por defecto.
  3. Personalizaci贸n de cabeceras v铆a CSS
  4. Ordenaci贸n Multicolumna
  5. Extensibilidad v铆a Widgets
  6. M铆nimo tama帽o.
  7. Posibilidad de ordenar por fechas, moneda, IPs鈥
  8. Facilidad de uso聽

Para ampliar informaci贸n consultar la web oficial:

http://tablesorter.com

DESCARGA:

http://tablesorter.com/docs/#Download

Descargar los ficheros:

  1. 聽jquery-1.3.js
  2. 聽jquery.tablesorter.min.js

EJEMPLO B脕SICO:

La aplicaci贸n de TableSorter es muy sencilla, b谩sicamente son tres pasos:

1-聽Modificar el HEAD de la p谩gina HTML para importar jquery-1.3.js y jquery.tablesorter.min.js

<script type=鈥漷ext/javascript鈥 src=鈥漥query-1.3.js鈥></script>
<script type=鈥漷ext/javascript鈥 src=鈥漥query.tablesorter.min.js鈥></script>

聽2-聽Tambi茅n dentro del HEAD introducir este c贸digo

$(document).ready(function()
聽聽聽 {
聽聽聽聽聽聽聽 $(鈥#idTabla鈥).tablesorter();
聽聽聽 }
);

Esto hace que cuando termine de cargar el documento HTML la librer铆a modifique la tabla y la haga ordenable.

3-聽Para que TableSorter funcione correctamente la tabla HTML tiene que tener la siguiente estructura:

<TABLE id=鈥漣dTabla鈥>
<THEAD>
聽聽<TR>
聽聽聽聽 <TH>Cabecera1</TH>
聽聽聽聽 <TH> Cabecera2</TH>
聽聽聽聽 <TH> Cabecera3</TH>
聽聽</TR>
聽</THEAD>
聽<TBODY>
聽聽<TR>
聽聽聽聽 <td>Dato1</TD>
聽聽聽聽 <td>Dato2</TD>
聽聽聽聽 <td>Dato3</TD>
聽聽</TR>
聽聽鈥
聽</TBODY>
</TABLE>

C贸digo Ejemplo B谩sico:

<HTML>
聽<HEAD>
聽聽<TITLE>Ejemplo TableSorter</TITLE>
聽聽聽
聽聽<script type=鈥漷ext/javascript鈥 src=鈥漥query-1.3.js鈥></script>
聽聽<script type=鈥漷ext/javascript鈥 src=鈥漥query.tablesorter.min.js鈥></script>

聽聽<script type=鈥漷ext/javascript鈥>
聽聽聽$(document).ready(function()
聽聽聽聽聽聽 {
聽聽聽聽聽聽聽聽聽聽 $(鈥#tabla_basica鈥).tablesorter();
聽聽聽聽聽聽 }
聽聽聽);
聽聽</script>
聽</HEAD>
聽<BODY >
聽聽<H1>EJEMPLO TABLESORTER BASICO</H1>
聽聽<BR>
聽聽<H3>Tabla HTML B谩sica</H3>
聽聽<TABLE id=鈥漷abla_basica鈥 BORDER=鈥1PX鈥>
聽聽聽<THEAD>
聽聽聽聽<TR>
聽聽聽聽聽聽 <TH>Id Usuario</TH>
聽聽聽聽聽聽 <TH>Fecha Alta</TH>
聽聽聽聽聽聽 <TH>Nick</TH>
聽聽聽聽聽聽 <TH>Perfil</TH>
聽聽聽聽</TR>
聽聽聽</THEAD>
聽聽聽<TBODY>
聽聽聽聽<TR>
聽聽聽聽聽聽 <td>001</TD>
聽聽聽聽聽聽 <td>March 17, 2009 4:16 PM</TD>
聽聽聽聽聽聽 <td>usu1</TD>
聽聽聽聽聽聽 <td>Senior</TD>
聽聽聽聽</TR>
聽聽聽聽<TR>
聽聽聽聽聽聽 <TD>007</TD>
聽聽聽聽聽聽 <TD>January 8, 2010 2:23 PM</TD>
聽聽聽聽聽聽 <TD>usu5</TD>
聽聽聽聽聽聽 <TD>Junior</TD>
聽聽聽聽</TR>
聽聽聽聽<TR>
聽聽聽聽聽聽 <TD>003</TD>
聽聽聽聽聽聽 <TD>December 3, 2009 5:54 PM</TD>
聽聽聽聽聽聽 <TD>usu9</TD>
聽聽聽聽聽聽 <TD>Master</TD>
聽聽聽聽</TR>
聽聽聽聽<TR>
聽聽聽聽聽聽 <TD>009</TD>
聽聽聽聽聽聽 <TD>December 25, 2009 9:24 AM</TD>
聽聽聽聽聽聽 <TD>usu3</TD>
聽聽聽聽聽聽 <TD>Junior</TD>
聽聽聽聽</TR>
聽聽聽</TBODY>
聽聽</TABLE>
聽</BODY>
</HTML>