Creare liste e tabelle personalizzate in Javascript e List.js
Mi sono imbattutto per sbaglio in questa libreria, ed ho deciso che dovrò assolutamente usarla: List.js!
In pratica permette di impostare filtri, ordinamenti e ricerche su liste e tabelle; il tutto in Javascript standard, senza usare altre librerie esterne (tipo jQuery).
Inoltre il suo utilizzo è veramente semplice, oltre ad essere leggerissimo.
Vediamo due esempi, uno con le liste e una cole tabelle.
Cominciamo con le liste:
<!DOCTYPE html>
<html>
<head>
<title>List.js</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
</head>
<body>
<div id="books">
<input class="search" placeholder="Search">
<button class="sort" data-sort="title">Sort by title</button>
<button class="sort" data-sort="author">Sort by author</button>
<ul class="list">
<li>
<h3 class="title">Cujo</h3>
<p class="author">Stephen King</p>
</li>
<li>
<h3 class="title">Iceberg</h3>
<p class="author">Clive Cussler</p>
</li>
<li>
<h3 class="title">Il dio del fiume</h3>
<p class="author">Wilbur Smith</p>
</li>
</ul>
</div>
<script>
var options = {
valueNames: ['title', 'author']
};
var booksList = new List('books', options);
</script>
</body>
</html>
Come vedete, l'importante è che ci sia corrispondenza tra l'id, le classi e il codice Javascript.
Qui abbiamo una casella per la ricerca, e due pulsanti per ordinare (uno per titolo e uno per autore).
Questo invece un esempio con le tabelle:
<!DOCTYPE html>
<html>
<head>
<title>List.js</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
</head>
<body>
<div id="books">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="title">Sort by title</button>
<button class="sort" data-sort="author">Sort by author</button>
<table>
<tbody class="list">
<tr>
<td class="title">Cujo</td>
<td class="author">Stephen King</td>
</tr>
<tr>
<td class="title">Iceberg</td>
<td class="author">Clive Cussler</td>
</tr>
<tr>
<td class="title">Il dio del fiume</td>
<td class="author">Wilbur Smith</td>
</tr>
</tbody>
</table>
</div>
<script>
var options = {
valueNames: ['title', 'author']
};
var booksList = new List('books', options);
</script>
</body>
</html>
Come vedete il codice Javascript è identico; quello che cambia è l'HTML.
La cosa importante da ricordarsi in questo esempio, è che la classe list deve essere applicata al tag tbody, e non al tag table.
In entrambi gli esempi non c'è CSS; quindi la pagina sarà un pò "bruttina".
Ma potete crearlo voi, o applicare gli stili di un framework se lo usate (Twitter Bootstrap per dirne uno).
Inoltre ci stanno altre funzioni interessanti, che potete visualizzare direttamente nel sito.
Enjoy!
javascript list.js html
Commentami!