
List.js: aplica filtros, ordenamiento y búsquedas a elementos HTML estáticos
List.js es una pequeña e increíblemente rápida biblioteca de javascript
que te permite aplicar filtros, ordenamiento e incluso búsquedas a elementos que no son cargados desde una base de datos, es decir, HTML
estático.
Con List.js es posible aplicar estas propiedades no solo a elementos existentes, si no que también es posible agregar nuevos elementos de manera dinámica a través de plantillas HMTL
.
Modos de uso
Usando una lista existente
<div id="hacker-list"> <ul class="list"> <li> <h3 class="name">Jonny</h3> <p class="city">Stockholm</p> </li> <li> <h3 class="name">Jonas</h3> <p class="city">Berlin</p> </li> </ul> </div>
var options = { valueNames: [ 'name', 'city' ] }; var hackerList = new List('hacker-list', options);
Crear lista al iniciar la biblioteca
<div id="hacker-list"> <ul class="list"></ul> </div>
var options = { item: '<li><h3 class="name"></h3><p class="city"></p></li>' }; var values = [ { name: 'Jonny', city:'Stockholm' } , { name: 'Jonas', city:'Berlin' } ]; var hackerList = new List('hacker-list', options, values);
Estos son solo algunas de las formas en que es posible usar la biblioteca, para ver una lista mas completa visita la documentación
Ejemplo
El siguiente es un ejemplo que se puede encontrar en la página de la biblioteca junto con otros ejemplos con distintos casos de uso.
See the Pen oEezp by Jonny Strömberg (@javve) on CodePen.15465
Página: http://www.listjs.com/
Para comentar debe estar registrado.