Tabelle

Le tabelle servono per organizzare dati e informazioni su righe e colonne.
Qui potrai trovare la User Interface, gli snippet e le modalità di utilizzo per le tabelle nell'ecosistema digitale della Regione Puglia.

Lorem Ipsum Fermentum Fermentum Ipsam Nobis laoreet Quaerat Consectetuer
Autem Autem Autem Autem Autem Autem Autem Autem
Nobis Nobis Nobis Nobis Nobis Nobis Nobis Nobis
Quae Quae Quae Quae Quae Quae Quae Quae
Ligula Ligula Ligula Ligula Ligula Ligula Ligula Ligula
Vitae Vitae Vitae Vitae Vitae Vitae Vitae Vitae
Nam Nam Nam Nam Nam Nam Nam Nam
Sem Sem Sem Sem Sem Sem Sem Sem
Odio Odio Odio Odio Odio Odio Odio Odio
Ipsam Ipsam Ipsam Ipsam Ipsam Ipsam Ipsam Ipsam
Natus Natus Natus Natus Natus Natus Natus Natus
Animi Animi Animi Animi Animi Animi Animi Animi
Dolor Dolor Dolor Dolor Dolor Dolor Dolor Dolor
Tempor Tempor Tempor Tempor Tempor Tempor Tempor Tempor
luctus luctus luctus luctus luctus luctus luctus luctus
Lacinia Lacinia Lacinia Lacinia Lacinia Lacinia Lacinia Lacinia
Eaque Eaque Eaque Eaque Eaque Eaque Eaque Eaque
Magnam Magnam Magnam Magnam Magnam Magnam Magnam Magnam
Numquam Numquam Numquam Numquam Numquam Numquam Numquam Numquam
Porta Porta Porta Porta Porta Porta Porta Porta
Fugit Fugit Fugit Fugit Fugit Fugit Fugit Fugit
Libero Libero Libero Libero Libero Libero Libero Libero
Pede Pede Pede Pede Pede Pede Pede Pede
Class Class Class Class Class Class Class Class
Ducimus Ducimus Ducimus Ducimus Ducimus Ducimus Ducimus Ducimus
Sit Sit Sit Sit Sit Sit Sit Sit
Cursus Cursus Cursus Cursus Cursus Cursus Cursus Cursus 
                                                
<div class="dms-datatable">
    <table id="table_id" class="display table table-striped" style="width:100%">
        <thead>
            <tr>
                <th>Lorem</th>
                <th>Ipsum</th>
                <th>Fermentum</th>
                <th>Fermentum</th>
                <th>Ipsam</th>
                <th>Nobis</th>
                <th>laoreet</th>
                <th>Quaerat</th>
                <th>Consectetuer</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
                <td>Autem</td>
            </tr>
            <tr>
            <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
            <tr>
                <td><a href="#" class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Vedi dettagli"><i class="dms-wk-icon-show-details"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Modifica"><i class="dms-wk-icon-edit"></i></a><a href="#"
                    class="dms-tooltip table--action" data-toggle="tooltip" data-placement="top"
                    title="Cancella"><i class="dms-wk-icon-delete"></i></a></td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
                <td>Nobis</td>
            </tr>
        </tbody>
    </table>
</div>
                                                
$('#table_id').DataTable({
    "scrollX": true,
    "scrollY": '400px',
    "lengthMenu": [
        [10, 25, 50, 100],
        [10, 25, 50, 100]
    ],
    "columnDefs": [
        { "orderable": false, "targets": 0}
    ],
    "order": [[1, 'asc']],
    "fnDrawCallback": function () {
        if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
          $('.dataTables_paginate').show();
        } else {
          $('.dataTables_paginate').hide();
        }
      },
    "dom": '<"top"lf>rt<"bottom"i><"bottom"p><"clear">',
    "language": {
        "lengthMenu": "Visualizza _MENU_ elementi per pagina",
        "zeroRecords": "Nessun risultato",
        "info": "Pagina _PAGE_ di _PAGES_",
        "infoEmpty": "Nessun risultato disponibile",
        "infoFiltered": "(Filtrati per _MAX_ di risultati)",
        "search": "Cerca:",
        "paginate": {
          "first": "Prima",
          "last": "Ultima",
          "next": "<i class='dms-wk-icon-arrow-right'></i>",
          "previous": "<<i class='dms-wk-icon-arrow-left'></i>"
        }
    }
});

Utilizzo

DataTables è un plug-in jQuery di semplice utilizzo con una vasta gamma di opzioni personalizzabili. Gli esempi in questa sezione dimostrano l'inizializzazione di base e la modalità in cui la tabella può essere facilmente personalizzata.

Una tabella di tipo datatable è una modalità tabellare avanzata, un'estensione della tabella generica che permette diverse funzionalità complesse sui dati visualizzati: ricerca degli elementi, paginazione, filtro di ricerca associato, azioni all'interno, ordinamento e altre interazioni avanzate.
La sua struttura è gestita dinamicamente e la sua configurazione avviene lato jQuery, tramite l'id univoco è possibile modificare i parametri di configurazione (vedi snippet jQuery).
Lato html è sufficiente creare una <table> con la sua classica struttura <table> <thead> <tbody> ed applicargli un id.
Al fine di avere la corretta formattazione, tale tabella dovrà avere le classi display table table-striped e dovrà essere contenuta all'interno del div dms-datatable

Titolo tabella base

# Lorem Ipsum Culpa Donec Ante
1 lobortis Tincidunt Error Amet Vero
2 lobortis Tincidunt Error Amet Vero 
                                                        
<div class="dms-table">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th class="w-5" scope="col">#</th>
                <th scope="col">Lorem</th>
                <th scope="col">Ipsum</th>
                <th scope="col">Culpa</th>
                <th scope="col">Donec</th>
                <th scope="col">Ante</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th class="w-5" scope="row">1</th>
                <td>lobortis</td>
                <td>Tincidunt</td>
                <td>Error</td>
                <td>Amet</td>
                <td>Vero</td>
            </tr>
            <tr>
                <th class="w-5" scope="row">2</th>
                <td>lobortis</td>
                <td>Tincidunt</td>
                <td>Error</td>
                <td>Amet</td>
                <td>Vero</td>
            </tr>
        </tbody>
    </table>
</div>

Utilizzo

Le tabelle base vengono utilizzate quando non vi è la necessità di aggiungere interazioni e controlli avanzati.
La sua struttura prevede soltanto codice html, senza prevedere una inizializzazione lato jQuery. Infatti, per ottenere la corretta formattazione è sufficiente aggiungere le classi table table-bordered al tag table e inserire l'intera struttura all'interno di <div class="dms-table"><div> .