Saltar al contenido

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=鈥漷ext/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=鈥漷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()
聽聽聽聽聽聽聽聽聽聽聽 {
聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //CONFIGURAMOS LOS CSS DE LA CABECERA
聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //PARA QUE PINTE LAS FLECHAS CORRESPONDIENTES
聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //A LA ORDENACION
聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //A脩ADIMOS EL WIDGET 鈥榋EBRA鈥 PARA QUE PINTE
聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //lAS FILAS DE COLOR ALTERNO
聽聽聽聽聽聽聽聽聽聽聽聽聽聽 $(鈥#tabla_css_tablesorter_highlight鈥).tablesorter(
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 {
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 cssHeader: 鈥渙rdenable鈥,
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 cssDesc:鈥漮rdenableAsc鈥,
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 cssAsc:鈥漮rdenableDesc鈥,
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 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(鈥漛ackground-color鈥, 鈥渙range鈥);
聽聽聽聽聽聽聽聽聽聽聽聽聽聽 });
聽聽聽聽聽聽聽聽聽聽聽 }).mouseout(function(){
聽聽聽聽聽聽聽聽聽聽聽聽聽聽 filaJQ = $(this).parent().get(0).cells;
聽聽聽聽聽聽聽聽聽聽聽聽聽聽 $(filaJQ).each(function () {
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 $(this).css(鈥漛ackground-color鈥, 鈥溾);
聽聽聽聽聽聽聽聽聽聽聽聽聽聽 });
聽聽聽聽聽聽聽聽聽聽聽 })
聽聽聽聽聽聽聽聽 })
聽聽聽聽聽聽聽 }
聽聽聽聽聽聽 );
聽聽聽聽聽 </script>
聽聽聽聽聽 <!鈥揊IN 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=鈥漷abla_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>