jExpand Tablas con filas expansibles en jQuery

Muchas veces discrepo contra el uso de Tablas HTML para diseño o el abuso de AJAX en la programación de sitios web, pero sin dudas que bien aplicado puede ser más que interesante. El caso de jExpand es uno de ellos, este pequeño plugin para jQuery permite crear Reportes en Tablas HTML con la funcionalidad de se expansibles, veamos un tutorial de uso utilizando un reporte de la Revista SoloPhotoshop Magazine. Las Tablas no son adecuadas para diseño web, pero si son optimas para lo que fueron creadas o sea realizar reportes. En el caso de AJAX, si deseamos que la información de nuestro sitio se indexe en buscadores, no es apropiado aplicarlo de forma que «esconda» el contenido HTML y obligar a que se muestre con una acción del usuario ya que obviamente los buscadores no saben dar clic y no van a rastrean, indexar y posicionar nuestro sitio. Algunas ventajas de la aplicación del plugin jExpand para jQuery es que se puede aplicar a reportes que del lado HTML contienen toda la información que deseamos mostrar. Esto lo hace 100% rastreable e indexable, adicionalmente es muy pequeño ya que interactúa solo con 2 eventos que se dan en la carga de la información y al presionar clic.

Configurando jExpand para jQuery

Para utilizar jExpand, en cuanto al HTML del reporte se debe realizar una Tabla <table>, que puede tener una cabecera <th> y luego un par de filas <tr> por cada elemento a mostrar del reporte de datos que estemos listando. Es importante y necesario que utilicemos un par de filas <tr>, ya que jExpand tomará un <tr> como «título» de cada elemento del reporte, y otro <tr> para el contenido de cada elemento del reporte. En la imagen vemos la fila de cabecera, la fila de titulo de cada elemento y una fila de contenido expandido en forma gráfica y el HTML involucrado en el proceso. También vemos que en los títulos de cada fila se puede tener o no diferentes columnas <td>. Otro elemento necesario en la fila del «título» de cada elemento del reporte es un botón donde damos clic para expandir el contenido, en este ejemplo utilizaremos una imagen  png con una flecha que mostraremos con CSS, y se representa en HTML con <div class=»arrow»><div>. Para aplicar los eventos de expandir y contraer el reporte con AJAX también es necesario identificar la Tabla, para eso en el ejemplo tomamos como nombre de la tabla id=»reporte».

Veamos un ejemplo HTML de jExpand

<table id="reporte">
<tr>
<th>Edicion</th>
<th>Tutoriales</th>
<th>Paginas</th>
<th></th>
</tr>
<tr>
<td>SoloPhotoshop Magazine 1</td>
<td>7</td>
<td>51</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="4">
<a href="http://solophotoshop.com/revista/1/">
<img src="solophotoshop-magazine-01.jpg" />
</a>
<h4>Tutoriales de SoloPhotoshop Magazine</h4>
<ul>
<li>Dorado Antiguo</li>
<li>Maravilla R&uacute;stica</li>
<li>Jard&iacute;n Resplandeciente</li>
</ul>
</td>
</tr>
<tr>
<td>SoloPhotoshop Magazine 2</td>
<td>7</td>
<td>52</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="4">
<a href="http://solophotoshop.com/revista/2/">
<img src="solophotoshop-magazine-02.jpg" />
</a>
<h4>Tutoriales de SoloPhotoshop Magazine</h4>
<ul>
<li>Naranja Amanecer</li>
<li>Piel de Seda o Efecto Glamour</li>
</ul>
</td>
</tr>
</table>

Con eso tenemos listo nuestro HTML, recuerden identificar la tabla como «reporte» con id=»reporte» y utilizar por cada elemento del reporte dos filas <tr> una para el título y otra para el contenido. En cada fila del título recuerda utilizar el <div class=»arrow»> para programar el evento clic de expandir la fila. En cuanto al CSS aparte del diseño que le demos al reporte es necesario tener en cuenta el aspecto visual de la flecha de expandir y contraer el contenido del reporte, el código a utilizar es el siguiente:

#reporte div.arrow {
background: transparent url(arrows.png) no-repeat scroll 0px -16px;
width: 16px;
height: 16px;
display: block;
}

explicado en español #reporte div.arrow, al elemento div que utiliza la clase arrow y está dentro del tag HTML llamado reporte le asignamos determinadas propiedades: fondo color transparente y una imagen arrows.png y ese elemento tendrá 16 pixeles de alto y ancho. Con display: block logramos que esa zona de 16×16 quede sensible al mouse, ya que recordemos que ese es el botón de expandir.

#reporte div.up {
background: transparent url(arrows.png) no-repeat scroll 0px 0px;
width: 16px;
height: 16px;
display: block;
}

La imagen arrow.png contiene en el mismo dibujo las flechas de arriba y abajo, por eso en el primer CSS div.arrow mostramos la zona inferior de la imagen que contiene la flecha para abajo (expandir) por eso usamos el scroll vertical -16px en la imagen que físicamente mide 32px de alto por 16 de ancho. En el segundo CSS #reporte div.up muestra la parte superior que es la fecha para arriba (contraer).

Es bueno prestar atención en que el cambio es solo gráfico y visual, no hay nada operativo en cuanto a eventos y como ven lo logramos gracias a CSS. Utilizar estas técnicas CSS para evitar diseños dentro del HTML y sobre todo JavaScript innecesario es muy bueno, o mejor dicho es la forma correcta lo otro es un grave y frecuente error.

Otra ventaja del buen uso de CSS es la optimización para lograr archivos y páginas más livianas, para esto en lugar de sobreescribir propiedades como el alto, ancho, archivo de imagen y display con valores que ya posee cuando pasa de .arrow a .up solo vamos cambiar la posición de imagen a postrar, el segundo CSS queda de la forma:

#reporte div.up {
background-position: 0px 0px;
}

Ya vimos el HTML y el CSS necesario, ahora solo falta la parte JavaScript, más precisamente AJAX de este asunto, que es ni más ni menos que llamar al framework jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

y luego incluir el plugin jExpand que consiste en las siguientes líneas:

$(document).ready(function(){
$("#reporte tr:odd").addClass("odd");
$("#reporte tr:not(.odd)").hide();
$("#reporte tr:first-child").show();

$("#reporte tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});

El plugin se ejecuta cuando la página identificada por $(document) se carga con el evento ready. Como cada elemento del reporte está formado por dos filas el plugin utiliza una sencilla solución que es asumir que una fila es impar odd, la del titulo y la otra obviamente par not(.odd), la del contenido. La de contenido comienza oculta o contraída, veamos línea por línea, a las filas impares les asigna una clase CSS llamada odd:

$("#reporte tr:odd").addClass("odd");

a las pares se las oculta:

$("#reporte tr:not(.odd)").hide();

También asume que el reporte tiene una cabecera de titulos que se muestra siempre:

$("#reporte tr:first-child").show();

Para el usuario se prevee un solo evento que es el de expandir o contraer el contenido, para eso se programa el evento click en la fila impar $(«#reporte tr.odd»).click:

$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");

la primer línea hace que la fila siguiente a la presionada se expanda y con la segunda línea sustituimos la clase CSS .arrow por .up, en otras palabras presionamos el título y se expande el contenido y gráfica o visualmente la flecha abajo de expandir, cambia por flecha arriba de contraer.

Pueden ver un Demo de jExpand para jQuery y descargar el archivo de jExpand Demo en zip, también pueden visitar en ingles la web del creador Janko At Warp Speed.