🏆 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 ‘tunear’ 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:

Permite crear tablas ordenables a partir de una tabla HTML estándar. Se hace clic sobre las cabeceras de cada columna para ordenar.
Posibilidad de ordenación por defecto.
Personalización de cabeceras vía CSS
Ordenación Multicolumna
Extensibilidad vía Widgets
Mínimo tamaño.
Posibilidad de ordenar por fechas, moneda, IPs…
Facilidad de uso

Para ampliar información consultar la web oficial:

http://tablesorter.com

DESCARGA:

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

Descargar los ficheros:

jquery-1.3.js
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=”text/javascript” src=”jquery-1.3.js”></script>
<script type=”text/javascript” src=”jquery.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=”idTabla”>
<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=”text/javascript” src=”jquery-1.3.js”></script>
  <script type=”text/javascript” src=”jquery.tablesorter.min.js”></script>

  <script type=”text/javascript”>
   $(document).ready(function()
       {
           $(”#tabla_basica”).tablesorter();
       }
   );
  </script>
</HEAD>
<BODY >
  <H1>EJEMPLO TABLESORTER BASICO</H1>
  <BR>
  <H3>Tabla HTML Básica</H3>
  <TABLE id=”tabla_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>