{"id":2660,"date":"2019-06-10T10:44:46","date_gmt":"2019-06-10T09:44:46","guid":{"rendered":"http:\/\/www.donatantonio.net\/blog\/?p=2660"},"modified":"2019-06-10T10:44:46","modified_gmt":"2019-06-10T09:44:46","slug":"scroll-verticale-in-una-jquery-datatables","status":"publish","type":"post","link":"https:\/\/www.donatantonio.net\/blog\/tipsetricks\/scroll-verticale-in-una-jquery-datatables\/","title":{"rendered":"Scroll verticale in una jQuery DataTables"},"content":{"rendered":"

Abbiamo gi\u00e0 visto come creare velocemente una tabella con jQuery DataTables<\/a>, e come disabilitare la paginazione di default<\/a>.
\nUn utile opzione del plug-in \u00e8 quella che permette di navigare la tabella con un comodo scroll verticale<\/strong> all’interno del body della stessa. In altre parole \u00e8 possibile effettuare lo scroll del body della tabella senza dover interagire con la scrollbar del browser.<\/p>\n

\"DataTable<\/a>
\nL’opzione da utilizzare per attivare la funzione \u00e8 denominata scrollY <\/strong>e come unico parametro richiede un valore per l’altezza del tbody<\/em>. Il valore pu\u00f2 essere espresso in pixel o in qualsiasi altra unit\u00e0 di misura accettata da CSS (px, em, pt, cm, etc..) e va racchiusa tra apici singoli o doppi.<\/p>\n

Se ad esempio volessimo impostare uno scrollY<\/strong> di 200px<\/strong> dovremmo scrivere:<\/p>\n

\r\n<script type="text\/javascript">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $('#idTabella').DataTable({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "paging": false,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "scrollCollapse": true,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "scrollY": '200px',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "language": {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "url": "\/\/cdn.datatables.net\/plug-ins\/1.10.19\/i18n\/Italian.json"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n<\/script>\r\n<\/pre>\n
E’ consigliabile utilizzare l’opzione scrollY con paginazione disattivata<\/em> (paging: false<\/strong>) anche se lo scroll \u00e8 accettato anche in presenza di una paginazione.<\/p>\n
E come calcolare un valore “giusto” per lo scrollY di DataTable?<\/strong>
\nE’ consuetudine adattare l’altezza della DataTable allo spazio presente nella finestra del browser<\/em>; in pratica risulta necessario a volte calcolare dinamicamente<\/em> il valore da assegnare a scrollY in base alla risoluzione del browser dell’utente e allo spazio occupato da altri elementi nella pagina.
\nUn esempio classico pu\u00f2 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 \u00e8 necessario ricorrere a jQuery<\/em> ed effettuare alcuni semplici calcoli<\/em>.
\nIpotizzando<\/strong> che prima della tabella, ad esempio, ci siano contenuti in navbar per 250px<\/em> \u00e8 possibile calcolare il valore assegnabile allo scroll utilizzando il metodo height()<\/em> di jQuery sulla finestra del browser e sottraendo ad esso i 250px superiori:<\/p>\n
\r\nvar hScroll = $(window).height() - 250;\r\n<\/pre>\n
In questo modo \u00e8 possibile poi assegnare il valore calcolato come parametro dell’opzione scrollY<\/em> di DataTable:<\/p>\n
\r\n<script type="text\/javascript">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var hScroll = $(window).height() - 250;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $('#idTabella').DataTable({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "paging": false,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "scrollCollapse": true,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "scrollY": hScroll,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "language": {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "url": "\/\/cdn.datatables.net\/plug-ins\/1.10.19\/i18n\/Italian.json"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n<\/script>\r\n<\/pre>\n
Ecco la nostra tabella jQuery DataTables con uno scroll verticale di 200px<\/strong>:<\/p>\n