jQuery / Ordenando lineas de tablas

Bienvenidos sean a este post, hoy veremos un concepto extraño.

En este post solo analizaremos algunas formas de como podemos ordenar la informacion contenidas en nuestras tablas, como sabran usualmente la informacion se encuentra contenida en bases de datos y nosotros al extraer informacion lo hacemos de una forma ordenada, supongamos que tengamos una pagina como la siguiente

Esta sera la que usaremos en los proximos posts pero sobre esta trabjaremos a partir del proximo post, pero observen los datos que poseemos y los posibles que podemos usar para ordenar, pasemos al primer caso.

Ordenando tablas en el server

Como dijimos al comienzo lo mas usual es ordenar la informacion de las tablas mediante la consulta que realizamos al server, esto es asi porque usualmente la informacion se provee desde una base de datos al momento de hacer la consulta y extraer la informacion esta provista en forma ordenada por la clausula ORDER BY, ya que es una buena practica comenzar con un orden predeterminado, si observan la imagen en la pagina aplicamos un <th> en la tabla, dado que seran los encargados de ordenar por las distintas formas, si tuvieramos un servidor con una base de datos, en lugar de tener un archivo html usariamos uno de tipo php y podriamos tener una seccion thead de la siguiente manera:

<table id="mis-datos" class="ordenable">
	<thead>
		<th></th>
		<th><a href="indice.php?orden=titulo">Titulo</a></th>
		<th><a href="indice.php?orden=autor">Autor</a></th>
		<th><a href="indice.php?orden=fecha">Publicado</a></th>
		<th><a href="indice.php?orden=precio">Precio</a></th>
	</thead>
	<tbody>
		<tr>
		<td><img src="img/pic01.webp"></td>
		<td>C# workshop</td>
		<td>Jason Hales , Almantas Karpavicius , Mateus Viegas</td>
		<td>Septiembre 2022</td>
		<td>$41.99</td>
		</tr>
		.... resto de la pagina.
	</tbody>
</table>

En este caso agregamos un link para cada una de las posibilidades de ordenar y este llamara al archivo en cuestion y le pasamos el dato con el cual debera ordenar la lista al volver a cargarla, pasemos a la siguiente posibilidad.

Ordenar mediante Ajax

En el ejemplo anterior aplicamos una forma basica de como ordenar nuestra lista en base a la informacion de la base de datos, pero se refresca la pagina cada vez que presionamos uno de los links y esto lo podemos mejorar con jQuery al aplicar metodos Ajax, como hemos visto en posts anteriores, para ello podemos usar un codigo como el siguiente:

$(document).ready(function() {
  $('#mis-datos th a').click(function(event) {
    event.preventDefault();
    $('#mis-datos tbody').load($(this).attr('href'));
  });
});

Este codigo simplemente intercepta todos los links del thead y carga la pagina del link seleccionado mediante el atributo obtenido por attr, y lo cargara en el tbody correspondiente, si se preguntan porque es asi, es simple porque al usar load estamos enviando la informacion mediante XMLHttpRequest lo cual hace que el servidor determine que la solicitud es de tipo Ajax, por lo tanto no necesita recargar la pagina sino simplemente devolverla en el lugar de destino, en este caso tbody, evitando asi recargar la pagina, como pueden ver en ambos casos logramos el objetivo pero solamente cambia la forma de mostrarlo, pasemos al siguiente caso.

Ordenando tablas dentro del browser

Pero que sucede si no queremos esperar por la respuesta del server para ordenar la lista o no disponemos de la posibilidad de poder manejar la informacion del lado del servidor? bueno, en esos casos podemos implementar una soluciona mediante scripting del lado del cliente y la capacidad de jQuery para manejar a los elementos DOM, por ejemplo nosotros lo usaremos mas de esta forma:

<table id="t-1" class="ordenable">
<thead>
	<th></th>
	<th class="orden-alfa">Titulo</th>
	<th class="orden-alfa">Autor</th>
	<th class="orden-fecha">Publicado</th>
	<th class="orden-numero">Precio</th>
</thead>
<tbody>
	<tr>
	<td><img src="img/pic01.webp"></td>
	<td>C# workshop</td>
	<td>Jason Hales , Almantas Karpavicius , Mateus Viegas</td>
	<td>Septiembre 2022</td>
	<td>$41.99</td>
	</tr>
	... el resto de la pagina.
</tbody>
</table>

Observen como aplicamos una clase a cada una de las posibilidades de como ordenar las lista de libros, al igual que trabajamos en otros posts seleccionaremos las clases y trabajaremos con nuestros codigos sobre ellos, pero de esto hablaremos en los posts venideros, en ellos cubriremos estas distintas formas de trabajar:

• Datos extraidos del contenido HTML
• Atributos de datos personalizados HTML5
• Una representación JSON de los datos de la tabla.

En resumen, hoy solo hemos visto de manera superficial como se puede ordenar los datos de una tabla, primero hemos hablado como se hace de forma muy basica, simplemente llamando a la pagina, en el segundo caso lo hemos hablado por medio de Ajax, y finalmente hemos comentado sobre las distintas formas de hacerlo si no disponemos de las formas anteriores, pero sobre esto ahondaremos en los proximos posts, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.