Saltar al contenido

www. La mandarina mecánica .es

Programación y Tecnología

Archivo

Etiqueta: tablesorter

Jquery TableSorter

ago 25
JavaScript

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…

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>

Dejar Comentario , , , , , Leer más

JQUERY Tablesorter II

ago 25
JavaScript

En al siguente ejemplo vamos a cambiar el aspecto y comportamiento de una tabla HTML básica utilizanzo TableSorter, CSS y JavaScript.

Vamos a mejorar la tabla HTML básica en los siguientes aspectos:

-          Posibilidad de ordenar los datos, incluso por fechas.

-          Alternar los colores de cada fila.

-          Hacer que cambie el cursor cuando pasamos por encima de una fila.

-          Hacer que cambie el color de la fila al pasar con el cursor por encima.

-          Modificación de las imágenes de la cabecera en función del tipo de ordenación.

Algunas de estas mejoras las proporciona la librería TableSorter y otras están basadas en CSS y JavaScript (JQuery).

TableSorter ofrece muchas más posibilidades de personalización de las tablas HTML, para ver todas las posibilidades consultar su página web. 

http://tablesorter.com

  

Ficheros Necesarios:

- arrow_down.png (Imagen cabecera orden descendente)

    
- arrow_off.png (Imagen cabecera sin orden)

    
- arrow_up.png (Imagen cabecera orden ascendente)

    
- jquery-1.3.js
- jquery.tablesorter.min.js
- tableSorter.html (Contiene el código del ejemplo)

Ejemplo:

<HTML>
   <HEAD>
      <TITLE>Ejemplo TableSorter</TITLE>
      <!– DEFINIMOS EL ESTILO DE LA TABLA–>
      <style type=”text/css”>
        body {
            color: white;
            background-color: #808080;
            font-family:arial;
         }
         table.tablesorter{
            border-width: 1px;
            border-style: outset;
            width:100%;
            color:white;
         }
         /*CONFIGURA LA CABECERA PONE LAS IMAGENES DE LAS FLECHAS*/
         table.tablesorter thead th.ordenable{
            background-color:black;
            background-image: url(arrow_off.png);
            cursor: pointer;
            background-repeat: no-repeat;
            background-position: 97% 50%;
            color: white;
         }
         /*IMAGEN DE LAS FLECHAS ORDEN ASCENDENTE*/
         table.tablesorter thead th.ordenableAsc{
            background-image: url(arrow_up.png);
         }
         /*IMAGEN DE LAS FLECASH ORDEN DESCENDENTE*/
         table.tablesorter thead th.ordenableDesc{
            background-image: url(arrow_down.png);
         }
         /*COLOR PARA LAS FILAS ODD Y PARA QUE SALGA LA MANO*/
         table.tablesorter tbody tr.odd td{
            background-color:black;
            cursor: pointer;
         }
         /*COLOR PARA LAS FILAS EVEN Y PARA QUE SALGA LA MANO*/
         table.tablesorter tbody tr.even td{
            background-color:green;
            cursor: pointer;
         }
      </style>
      <!– FIN DEFINIMOS EL ESTILO DE LA TABLA–>
     
      <!– JAVASCRIPT–>
      <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()
            {
               //CONFIGURAMOS LOS CSS DE LA CABECERA
               //PARA QUE PINTE LAS FLECHAS CORRESPONDIENTES
               //A LA ORDENACION
               //AÑADIMOS EL WIDGET ‘ZEBRA’ PARA QUE PINTE
               //lAS FILAS DE COLOR ALTERNO
               $(’#tabla_css_tablesorter_highlight’).tablesorter(
                  {
                     cssHeader: “ordenable”,
                     cssDesc:”ordenableAsc”,
                     cssAsc:”ordenableDesc”,
                     widgets: ['zebra']
                  }
         );
         //PARA QUE RESALTE LA FILA SELECCIONADA DE NARANJA
         //MODIFICAMOS LOS EVENTOS MOUSEOVER Y MOUSEOUT
         //Y PARA CADA CELDA DE CADA FILA LE ASIGNAMOS
         //EL VALOR QUE LE CORRESPONDA
         $(’#tabla_css_tablesorter_highlight td’).each(function() {
            $(this).mouseover(function(){
               filaJQ = $(this).parent().get(0).cells;
               $(filaJQ).each(function () {
                  $(this).css(”background-color”, “orange”);
               });
            }).mouseout(function(){
               filaJQ = $(this).parent().get(0).cells;
               $(filaJQ).each(function () {
                  $(this).css(”background-color”, “”);
               });
            })
         })
        }
       );
      </script>
      <!–FIN JAVASCRIPT–>
      </HEAD>
      <BODY >
         <H1>Tablas HTML</H1>
         <BR>
         <H3>Tabla HTML Básica + Css + TableSorter + HighLight</H3>
         <!– LA TABLA TIENE QUE TENER ESTA ESTRUCTURA–>
         <!– MUY IMPORTANTE PONERLE EL ID SI NO TABLESORTER NO FUNCIONA–>
         <TABLE id=”tabla_css_tablesorter_highlight” class=”tablesorter”>
         <THEAD>
            <TR>
               <TH>Id Usuario</TH>
               <TH>Fecha Alta</TH>
               <TH>Nick</TH>
               <TH>Perfil</TH>
            </TR>
         </THEAD>
         <TBODY>
            <TR>
               <td id=”001″>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>

Dejar Comentario , , , , Leer más

Etiquetas

Copyright © 2009 www. La mandarina mecánica .es Theme by SRS Solutions inicio