Reordenar y filtrar una lista con animación en Javascript/jQuery

Estás en... Home > Programación > Reordenar y filtrar una lista con animación en Javascript/jQuery

Reordenar y filtrar una lista con animación en Javascript/jQuery

Publicado el 21/05/2010 en Programación por Henning Kiel

Experto en usabilidad, Ruby on Rails, sistemas Linux.. Henning coordina todo el proceso de análisis de usabilidad, supervisa el correcto funcionamiento de todos los sistemas de Axtro, y otras muchas cosas...

En este artículo hablo sobre la librería Quicksand para jQuery que nos permite ordenar y filtrar una lista de elementos de forma muy elegante. La acabo de usar en el catálogo de plantillas de 3sellers.

Usar Quicksand es muy sencillo. Básicamente sólo hace una cosa: Pasándola los elementos que actualmente está viendo el usuario y los elementos que queremos que vea según los nuevos filtros o la nueva ordenación, Quicksand se encarga de esconder los elementos que ya no deberían ser visibles, hace aparecer cualquier nuevo elemento, y mueve cualquier elemento común entre la lista antigua y nueva a su nuevo sitio.

Para poder usar Quicksand tenemos que descargarlo en razorjack.net/quicksand/ e incluir los ficheros de jQuery y de Quicksand:


<head>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery.quicksand.min.js" type="text/javascript"></script>
</head>

También necesitamos una lista de elementos iniciales. Abajo tenemos la lista usada en la demostración de este artículo:


<ul id="origen">
<li data-id="a">Alicante</li>
<li data-id="b">Barcelona</li>
<li data-id="c">Cartagena</li>
<li data-id="d">Dortmund</li>
<li data-id="e">Essen</li>
<li data-id="f">Frankfurt</li>
</ul>

Le he dado el ID 'origen' a la lista porque luego tenemos que pasar la lista como parametro a Quicksand y así es fácil encontrarla. Para los elementos individuales de la lista no estoy usando un ID sino un atributo 'data-id' para identificarlos. 'data-id' es el atributo que usa Quicksand por defecto para identificar dos elementos iguales. Más abajo veremos porque esto es importante.

Por último necesitamos una lista de elementos que queremos que aparezcan después de filtrar la lista. Es tarea nuestra conseguir esta lista. En la demostración de este artículo simplemente he añadido varias listas escondidas al HTML, pero en la mayoría de los casos queremos obtenerla a través de una llamada AJAX según los filtros activados por el usuario. Abajo podemos ver una de las listas de la demostración:


<ul id="espana" style="display:none;">
<li data-id="c">Cartagena</li>
<li data-id="a">Alicante</li>
<li data-id="g">Granada</li>
<li data-id="b">Barcelona</li>
</ul>

Ya estamos preparados para utilizar Quicksand con el siguiente código:


$('#origen').quicksand( $('#espana li') );

Primero simplemente usamos jQuery para obtener una referencia a la lista original. Sobre esta lista llamamos a la función 'quicksand', pasándola todos los elementos de la nueva lista 'espana'. Ahora podemos ver porque es necesario añadir el atributo 'data-id' tanto a los elementos de la lista antigua como a los elementos de la lista nueva. Quicksand comparará cada elemento de las dos listas para saber que elementos debe esconder (porque no aparecen en la nueva lista) y que elementos debe mover (porque han cambiado de sitio en la nueva lista).

En caso de utilizar una llamada AJAX para obtener la nueva lista deberíamos usar Quicksand de la siguiente manera:


$.ajax({
        url: '/nuevos/elementos',
        success: function(data, textStatus, request){
          // Convertimos la respuesta textual del servidor a elementos en el DOM
          data = $(data);
          // Usamos Quicksand para mostrar la nueva lista
          $('#origen').quicksand(data);
        }
       }

En el callback 'success' primero convertimos la respuesta del servidor a elementos en el DOM y luego usamos Quicksand igual como arriba.