Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

“Una raccolta di suggerimenti e trucchi per sviluppatori, volutamente brevi e immediati”

Scroll verticale in una jQuery DataTables

Abbiamo già visto come creare velocemente una tabella con jQuery DataTables, e come disabilitare la paginazione di default.
Un utile opzione del plug-in è quella che permette di navigare la tabella con un comodo scroll verticale all’interno del body della stessa. In altre parole è possibile effettuare lo scroll del body della tabella senza dover interagire con la scrollbar del browser.

DataTable scrollY - Scroll verticale
L’opzione da utilizzare per attivare la funzione è denominata scrollY e come unico parametro richiede un valore per l’altezza del tbody. Il valore può essere espresso in pixel o in qualsiasi altra unità di misura accettata da CSS (px, em, pt, cm, etc..) e va racchiusa tra apici singoli o doppi.

Se ad esempio volessimo impostare uno scrollY di 200px dovremmo scrivere:

<script type="text/javascript">
      $('#idTabella').DataTable({
          "paging": false,
          "scrollCollapse": true,
          "scrollY": '200px',
          "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
          }
      });
</script>

E’ consigliabile utilizzare l’opzione scrollY con paginazione disattivata (paging: false) anche se lo scroll è accettato anche in presenza di una paginazione.

E come calcolare un valore “giusto” per lo scrollY di DataTable?
E’ consuetudine adattare l’altezza della DataTable allo spazio presente nella finestra del browser; in pratica risulta necessario a volte calcolare dinamicamente il valore da assegnare a scrollY in base alla risoluzione del browser dell’utente e allo spazio occupato da altri elementi nella pagina.
Un esempio classico può essere una tabella preceduta da una navbar contenente ad esempio delle tendine di selezione oppure altri elementi di input; in questo caso per rendere dinamica l’altezza dello scrollY e sfruttare lo spazio presente a video è necessario ricorrere a jQuery ed effettuare alcuni semplici calcoli.
Ipotizzando che prima della tabella, ad esempio, ci siano contenuti in navbar per 250px è possibile calcolare il valore assegnabile allo scroll utilizzando il metodo height() di jQuery sulla finestra del browser e sottraendo ad esso i 250px superiori:

var hScroll = $(window).height() - 250;

In questo modo è possibile poi assegnare il valore calcolato come parametro dell’opzione scrollY di DataTable:

<script type="text/javascript">
      var hScroll = $(window).height() - 250;
      $('#idTabella').DataTable({
          "paging": false,
          "scrollCollapse": true,
          "scrollY": hScroll,
          "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
          }
      });
</script>

Ecco la nostra tabella jQuery DataTables con uno scroll verticale di 200px:

Scarica il codice completo cliccando qui.
Scopri altri Tips & Tricks.

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×