jQuery / Revisitando la manipulacion de DOM

Bienvenidos sean a este post, hoy repasamos un tema para continuar el post anterior.

Antes de comenzar con este tema deben descargar el siguiente archivo que contendra los codigos que usaremos en este post y en los siguientes, les dejo el link:

Extraigan los archivos en un directorio y tenemos la base de nuestro proyecto, este sera unas imagenes junto a la pagina HTML y ell archivo css para establecer los elementos de nuestra pagina, si lo abren en este momento se vera de la siguiente manera

Cuando nos referimos a repasar sobre este tema es porque en este post ya hemos hablado sobre los distintos metodos para poder manipular la estructura del DOM, para nuestro primer cambio debemos crear el archivo codigo.js en el directorio antes creado y le agregaremos este primer codigo:

codigo.js

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

En este caso primero definiremos un objeto donde almacenaremos a la tabla de la pagina, despues definiremos otro objeto pero para el header de esta, para ello primero usamos a find para encontrarlos y con slice le diremos que omita el primer th, despues en este objeto primero que haremos sera mediante un wrapInner aplicar el enlace que esta como argumento en cada th, como el de la imagen no tiene nada lo omitimos mediante el slice, y despues le aplicamos la clase orden, este se encuentra en el archivo estilo.css, si miran la pagina se vera de la siguiente forma

Ahora tenemos dos elementos que nos permitiran ordenar los elementos de la lista, el link para activar el evento y la clase para poder destacarlos como tal, nuestro siguiente paso sera ordenarlo por titulo y para ello agregaremos el siguiente segmento de codigo en el bloque anterior:

$headers.on('click', function(ev) {
	ev.preventDefault();
	var col = $(this).index();
	var lin = $tabla1.find('tbody > tr').get();
	lin.sort(function(a, b) {
		var keyA = $(a).children('td').eq(col).text();
		keyA = $.trim(keyA).toUpperCase();
		var keyB = $(b).children('td').eq(col).text();
		keyB = $.trim(keyB).toUpperCase();
		if (keyA < keyB) return -1;
		if (keyA > keyB) return 1;
		return 0;
	});

	$.each(lin, function(index, row) {
		$tabla1.children('tbody').append(row);
	});
});

Como pueden ver necesitamos estar en el mismo bloque el codigo anterior porque necesitaremos acceder a los objetos creados anteriormente, lo primero que haremos es asociar el evento click a $headers, primero usaremos a preventDefault para evitar la accion del link, lo siguiente sera definir dos objetos, el primero almacenara las columnas y el otro sera para almacenar las lineas, observen que le pedimos que encuentre los tr del tbody y aplicamos el metodo get, nuestro siguiente paso sera ordenar a las lineas y para ello usaremos a sort que es un metodo nativo de Javascript, esta relacionado a los array y se encarga de ordenar los elementos internos de manera lexicografica, si les interesa saber mas sobre este les recomiendo este post, en este caso lo aplicaremos al objeto lin y por medio de la funcion anonima recibiremos dos valores para compararlos, para ello primero definiremos una variable llamada keyA que sera nuestra primer clave para almacenar el valor de la celda, y para ello seleccionaremos al argumento a y de aqui seleccionaremos al td correspondiente a la columna que estamos trabajando y el texto por medio del metodo text, despues a esta misma variable la convertiremos a todo mayusculas y a traves de trim eliminaremos espacios en blanco antes y despues del texto, la siguiente variable hacemos lo mismo pero con el valor pasado en b.

Esto lo hacemos porque la comparacion es case sensitive,, lo siguiente son dos condicionales donde si keyA es menor a keyB devolvemos que el valor de a esta antes que el de b, el otro hace lo inverso y es para indicar que el dato en b esta antes q el dato en a, si no se cumple ninguna condicion devuelve 0 porque son iguales.

Hasta ahi ordenamos los elementos de la tabla pero todavia no lo implementamos en la tabla, para eso tienen el each donde pasamos al objeto lin, usamos al objeto de la tabla para seleccionar al tbody y agregamos cada una de los elementos ordenados en lin, veamos como funciona mediante el siguiente video

Como pueden ver en el video al clickear por titulo se ordeno el listado de manera lexicografica, si lo prueban con autor sucedera lo mismo pero en publicado y precio puede fallar, esto es debido a que solo trabajamos con texto y no contemplamos los otros pero eso es algo que mejoraremos en los proximos posts, antes de finalizar les dejo un archivo con todos los archivos y codigos finales de este post:

En resumen, hoy hemos repasado como manipular elementos DOM a traves de jQuery, en este caso tomamos un ejemplo que es una guia de libros y ordenamos el listado por titulo con la ayuda de jQuery, espero les haya sido util 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.