Creare liste e tabelle personalizzate in Javascript e List.js

Mattepuffo's logo
Creare liste e tabelle personalizzate in Javascript e List.js

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!


Condividi

Commentami!