ago
25
2010

JQUERY Tablesorter II

Descarga el contenido del Artículo en PDF pdf JQUERY Tablesorter II

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>

Artículos relacionados

Related Posts

Acerca del Autor:

Leave a comment


nueve × = 81

Recientes

  • admin: Hola, He añadido una linea al código, que creo que se tuvo que quedar en el olvido… Respecto a tu...
  • Bernardo: Gracias por la explicación, sin embargo no entiendo algunas cosas: El código que muestran me imagino va en...
  • admin: Ok, prueba. No obstante, si no lo consigues muestrame o envíame el código y te echo una mano. Suerte!
  • Anselmo: Gracias por la respuesta, hoy voy a intentar modificar el código. De hecho tengo una lista con muchos links,...
  • admin: Hola, Lo que quieres hacer no parece complicado, prueba esto: Modifica la función initialize para que le...