Nos alejamos un poco de SAP para hablar de HTML y JavaScript, que también gustan 🙂
En un proyecto web personal, me hizo falta una forma sencilla de hacer listados en los que pudiera filtrar y ordenar datos, y una simple búsqueda en San Google me dio la respuesta: List.js
Se trata de una librería JavaScript muy muy ligera y rápida, que permite de forma muy sencilla crear listados de datos que pueden ser filtrados y ordenados.
Como cualquier librería JavaScript, lo primero necesario es descargarla y enlazarla en nuestro documento HTML.
<script type="text/javascript" src="/js/list.min.js"></script>
Definiremos una caja para nuestro listado, en la que crearemos nuestra lista con etiquetas <ul>. Por ahora, no modifiquemos el class «list» de nuestro <ul>, será necesario para que funcione correctamente.
<div id="lenguajes"> <ul class="list"> <li> <p class="puesto">Puesto: 1 <img src="/img/oro.png" alt="" /></p> <p class="lenguaje">Lenguaje: Java</p> </li> . . . </ul> </div>
Fijaos como cada dato dentro de cada etiqueta <ul> está distinguido con una class específica. Esto nos servirá después en JavaScript al declarar el listado
Agregar una caja de búsqueda o un botón de ordenación no puede ser más sencillo:
<input class="search" type="text" /> <button class="sort" data-sort="puesto">Ordenar por puesto</button> <button class="sort" data-sort="lenguaje">Ordenar por lenguaje</button>
Como anteriormente, dejemos los parámetros class como están, si deseáis cambiarlos, leed un poco más abajo. También, fijaos como en los botones de ordenación les indicamos mediante el atributo «data-sort» el nombre del dato que usarán para ordenar el listado.
Tras nuestro listado HTML, añadiremos algo de JavaScript, para indicar a la librería List.js dónde debe buscar los datos
<script type="text/javascript">
/* "Puesto" y "Lenguaje", las clases que identifican los distintos datos en el listado HTML */
var opciones = {
valueNames: [ 'puesto', 'lenguaje' ]
};
/* "Lenguajes", la clase que identifica la caja que contiene el listado en el HTML */
var lista = new List('lenguajes', opciones);
</script>
Así de sencillo es declarar el objeto List en JavaScript :). Como podéis ver, tan solo se le debe indicar el «nombre» (class) de la caja contenedora de nuestro listado y un array de opciones, en el que le indicamos el nombre de los datos a tener en cuenta.
Como os comentaba más arriba, es posible cambiar el nombre de las clases tanto de la lista HTML (etiqueta <ul>) como de la caja de búsqueda y los botones de ordenación, simplemente añadiendo los siguientes valores al array de opciones:
| listClass | Por defecto: «list» | El nombre de la clase del elemento <ul> |
| searchClass | Por defecto: «search» | El nombre de la clase de la caja de búsqueda |
| sortClass | Por defecto: «sort» | El nombre de la clase de los botones de ordenación |
Un ejemplo sería el siguiente:
<script>
var opciones = {
valueNames: [ 'puesto', 'lenguaje' ],
listClass: 'lista',
searchClass: 'busqueda',
sortClass: 'ordenacion',
};
var lista = new List('lenguajes', opciones);
</script>
Con esto, el listado dinámico ya debería estar funcionando sin problemas. Podéis descargaros un ejemplo simple de abajo. 🙂
¡Esto no es todo! List.js te permite algunas otras cosas más, como paginación de elementos, agregación de elementos a la lista desde JavaScript, integración de plugins… Pero claro, no os voy a explicar todo, que se pierde la magia 🙂 Podéis ver la documentación (en inglés) aquí mismo.
¡Nos vemos en la siguiente entrada! 🙂
