jQuery / Atributos de datos personalizados de HTML5

Bienvenidos sean a este post, hoy veremos otra variante para ordenarlos.

En el post anterior completamos de forma muy eficiente como ordenar los datos de la tabla a traves de disitintos tipos (alfanumerico, fecha y numerico) pero aqui veremos otra variante a traves de los atributos disponibles de HTML5, para ello tomaremos el codigo del post anterior, en caso de no tenerlo les dejo un link para descargarlo:

Extraigan el contenido en un directorio para comenzar a trabajar, nuestro primer paso sera ir al archivo indice.html y modificaremos a la tabla identificada como t-1 de la siguiente manera:

<table id="t-1" class="ordenable">
<thead>
	<th></th>
	<th data-orden='{"key":"titulo"}'>Titulo</th>
	<th data-orden='{"key":"autor"}'>Autor</th>
	<th data-orden='{"key":"fecha"}'>Publicado</th>
	<th data-orden='{"key":"precio"}'>Precio</th>
</thead>
<tbody>
	<tr data-libro='{"img":"pic01.webp","titulo":"C# workshop","autor":"Hales Jason","publicado":"Septiembre 2022","precio":41.99,"fecha":"2022-09"}'>
	<td><img src="img/pic01.webp"></td>
	<td>C# workshop</td>
	<td>Jason <span class="orden-clave">Hales</span>, Almantas Karpavicius , Mateus Viegas</td>
	<td>Septiembre 2022</td>
	<td>$41.99</td>
	</tr>
	<tr data-libro='{"img":"pic02.webp","titulo":"node.js development","autor":"Herron David","publicado":"Julio 2020","precio":29.99,"fecha":"2020-07"}'>
	<td><img src="img/pic02.webp"></td>
	<td>node.js development</td>
	<td>David <span class="orden-clave">Herron</span></td>
	<td>Julio 2020</td>
	<td>$29.99</td>
	</tr>
	<tr data-libro='{"img":"pic03.webp","titulo":"Learning jQuery","autor":"Swedberg Karl","publicado":"Junio 2013","precio":25.99,"fecha":"2013-06"}'>
	<td><img src="img/pic03.webp"></td>
	<td>Learning jQuery</td>
	<td>Karl <span class="orden-clave">Swedberg</span>, Jonathan Chaffer</td>
	<td>Junio 2013</td>
	<td>$25.99</td>
	</tr>
	<tr data-libro='{"img":"pic04.webp","titulo":"Mastering JavaScript Functional Programming","autor":"Kereki Federico","publicado":"Noviembre 2017","precio":39.99,"fecha":"2017-11"}'>
	<td><img src="img/pic04.webp"></td>
	<td>Mastering JavaScript Functional Programming</td>
	<td>Federico <span class="orden-clave">Kereki</span></td>
	<td>Noviembre 2017</td>
	<td>$39.99</td>
	</tr>
</tbody>
</table>

Es muy parecido al que teniamos antes pero le agregamos una serie de atributos, analicemos uno de los agregados en th:

<th data-orden='{"key":"titulo"}'>Titulo</th>

Observen que agregamos un campo con el atributo data- seguido de un nombre identificador despues en este usaremos una clave y un valor asociado, este tipo de dato sera interpretado por jQuery como JSON y por lo tanto lo podremos recuperar de la siguiente forma:

$('th').first().data('orden').key

Ahora pasemos a ver un caso de la tabla donde todos los datos tanto de la tabla como del thead los pasamos en el tr de cada dato mediante el data-libro donde estaran todos juntos, tomemos un ejemplo:

<tr data-libro='{"img":"pic02.webp","titulo":"node.js development","autor":"HERRON DAVID","publicado":"Julio 2020","precio":29.99,"fecha":"2020-07"}'>

Con esto tenemos nuestra pagina con nuevos datos para aplicar el orden, para ello iremos al archivo codigo.js donde cambiaremos el bloque existente de codigo de la siguiente manera:

$(document).ready(function() {
	var $tabla1 = $('#t-1');
	var $headers = $tabla1.find('thead th').slice(1);
	$headers
		.wrapInner('<a href="#"></a>')
		.addClass('orden');
	var lin = $tabla1.find('tbody > tr').get();

	$headers.on('click', function(ev) {
		ev.preventDefault();
		var $header = $(this),
			claveOrd = $header.data('orden').key,
			direcOrden = 1;
		if ($header.hasClass('orden-asc')) {
			direcOrden = -1;
		}

		lin.sort(function(a, b) {
			var keyA = $(a).data('libro')[claveOrd];
			var keyB = $(b).data('libro')[claveOrd];
			if (keyA < keyB) return -direcOrden;
			if (keyA > keyB) return direcOrden;
			return 0;
		});

		$headers.removeClass('orden-asc orden-desc');
		$header.addClass(direcOrden == 1 ? 'orden-asc' : 'orden-desc');
		$.each(lin, function(index, row) {
			$tabla1.children('tbody').append(row);
		});
	});
});

Este codigo es muy similar al que teniamos pero mas simplificado, primero estableceremos un objeto para la tabla, despues la de los th, a estos les aplicaremos un link y la clase orden, despues definiremos un objeto donde almacenaremos cada una de las lineas de la tabla.

Nuestro siguiente paso sera enlazar el evento click a los links en $headers, evitaremos su accion comun con preventDefault, lo siguiente sera definir dos objetos y una variable, el primero sera para el th seleccionado, el siguiente obtendra la clave que usaremos para ordenar, y para ello en el th seleccionado usaremos a data para obtener el valor asignado a key, para finalmente establecer la direccion de orden en esta variable, este condicional se mantiene del codigo anterior donde si $header si posee la clase orden-asc establece un valor para direcOrden.

Lo siguiente a lo anteriormente visto es ordenar el contenido de lin, observen como se facilito con respeecto a la version anterior dado que ahora podemos obtener los datos directamente sin tener que preprocesarlos, en este caso usaremos a data con la referencia de libro y pasaremos el valor almacenado en claveOrd para buscarlo en este, despues tenemos el mismo condicional para ordenarlo internamente, el siguiente bloque es el encargado primero de remover las clases de orden, despues en base al valor en direcOrden aplicaremos una clase u otra, y despues finalmente usaremos a each para aplicar las lineas ordenadas en el tbody, si lo probamos funcionara de la siguiente forma

Como pueden ver sigue funcionando de la misma forma pero con un codigo mucho mas facilitado por las ventajas que nos ofrece HTML5 y la capacidad que nos agrega jQuery para poder utilizarlo como si fueran JSON, antes de finalizar les dejo los codigos finales trabajados en este post:

En resumen, hoy hemos visto como usar caracteristicas de HTML5 en conjunto con jQuery, hemos visto como nos facilitan nuestro codigo porque nos ahorran muchas tareas, como por ejemplo poder diferenciar entre los distintos tipos de datos, espero les haya sido 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.