ago
25
2010
JavaScript

Jquery TableSorter

Descarga el contenido del Artículo en PDF Download PDF

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:

  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=”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>

Click on any of these buttons to help us to maintain this website.      
CJO

Artículos relacionados

Etiquetas: , , , , , , ,

Related Posts

Acerca del Autor:

Leave a comment


− 3 = seis

ndslite

Ayudas!

Encuéntralo aquí

Entradas recientes

Recientes

  • Muebles origenes: Muchas gracias por este pos, es muy interesante saludos
  • Keducc: Gracias me sirvió. Para marcar la partición como activa hice esto: http://windows.microsoft.co...
  • Nicolás Damián Sadofschi: Lo pude asociar perfecto en mi pagina de alquiler de pistas de hielo, graciasª
  • Ber: Hola, Entiendo lo que te sucede, pero eso es cosa del theme de tu Wordpress, si programas un poquito edítalo y...
  • Multinivel: Sabes como le puedo hacer para que el título de mi post no sea h1 Trabajo con seo pressor y este me pide...

Categorías

Certificación