Supporto volontario e collaborativo per Joomla!® in italiano

Tabelle responsive con javascript e CSS

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Tabella Responsive
Alcune volte capita di avere sul nostro sito web delle tabelle con molte colonne e spesso causano problemi sui piccoli schermi del cellulare.

Qui di seguito illustrero' 2 diverse tecniche per ovviare al problema.

Una soluzione sara' realizzata usando del codice CSS "puro" l'altra prevedera' l'uso di  un plugin per jquery di nome jfootable.



Iniziamo creando una tabella manualmente o dall'editor di testo di joomla (andremo in Tabella ->Inserisci tabella e selezioneremo righe e colonne che vogliamo) assegnandogli la classe "table" e la classe "tabella_reponsive".
Ecco una tabella di esempio

<table class="table tabella_reponsive">
<thead>
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Via</th>
<th>Citta</th>
<th>Data n</th>
<th>Professione</th>
<th>Marca auto</th>
<th>Modello auto</th>
</tr>
</thead>
<tbody>
<tr>
<td> Franco</td>
<td> Giannini</td>
<td> viale ignazio silone</td>
<td>Roma</td>
<td> 15/05/1981</td>
<td> Impiegato</td>
<td> Fiat</td>
<td> Punto</td>
</tr>
<tr>
<td> Gianni</td>
<td> Di Rossi</td>
<td> via francesco sapori</td>
<td> Roma</td>
<td> 01/01/1950</td>
<td> Dirigente</td>
<td> Toyota</td>
<td> Land Cruiser</td>
</tr>
<tr>
<td> Jan</td>
<td> Tuma</td>
<td> via f.t. marinetti</td>
<td>Roma</td>
<td>02/06/1975</td>
<td> Avvocato</td>
<td>Fiat</td>
<td>Sedici</td>
</tr>
<tr>
<td> Gianna</td>
<td>Noa</td>
<td>via d. giuliotti</td>
<td>Roma</td>
<td>09/09/1986</td>
<td> Sistemista</td>
<td> Toyota</td>
<td> IQ</td>
</tr>
<tr>
<td> Giorgio</td>
<td> De Giorgi</td>
<td> via cesare pavese</td>
<td>Roma</td>
<td>12/12/1991</td>
<td> Studente</td>
<td> Ford</td>
<td>Fiesta</td>
</tr>
<tr>
<td> Davide</td>
<td> De maria</td>
<td>via proust</td>
<td> Roma</td>
<td> 11/11/1920</td>
<td> Pensionato</td>
<td> Land Rover</td>
<td> Defender</td>
</tr>
</tbody>
</table>
 


Ora se la nostra tabella ha poche colonne siamo a posto cosi' perche' avendo assegnato la classe "table" alla tabella si visulizza in maniera corretta; se abbiamo molte colonne vedremo che su un piccolo schermo non entrano e faranno spaginare tutto o comunque saranno quasi illeggibili. Ecco alcune possibili soluzioni:

SOLUZIONE 1 : IMPOSTARE SCROLL COI CSS
Questo e' in assoluto il modo piu' semplice per ovviare al problema, in pratica aggiungiamo uno scroll alla tabella tramite i CSS.
E' sufficiente aggiungere nei CSS del nostro template (ad es. con protostar "templates/protostar/css/template.css") questo codice:
@media screen and (max-width: 767px) {
  .tabella_reponsive {
    overflow-x: auto;
    display: block;
  }
}
 


SOLUZIONE 2: Utilizzare footable per jquery
Utilizzando questo plugin per jquery la tabella nella versione responsive verra' "compressa" lasciando visibili solo alcuni elementi e rendendone altri espandibili per verticale (cliccando sul simbolo "+"). Ecco un immagine per chiarire:


Per utilizzarla bisogna innanzittuto scaricarla da qui (per farlo cliccate su "Dowload zip" in basso a destra) https://github.com/fooplugins/FooTable .
Per installare ed utilizzare questa libreria bisogna:
1) Aprire il file zip appena scaricato ed estrarre il file di nome "footable.js" nella cartella "JS" del vostro template (ad es.templates\protostar\js).
2) Sempre nel file zip estraete il file di nome "footable.core.css" e tutta la cartella "fonts" dentro la cartella "CSS" del vostro template (ad es.templates\protostar\css).
3) Bisogna ora dire al nostro template di caricare i file css e js che abbiamo inserito per farlo aggiungete nell'index.php del vostro template (ad es templates\protostar\index.php) dopo l'inclusione di jquery  queste righe:
$doc->addScript('templates/' . $this->template . '/js/footable.js');
$doc->addScriptDeclaration('
  jQuery( document ).ready(function( $ ) {
    $(\'.tabella_reponsive\').footable();
  });
');
 
Ed ora importiamo anche i CSS
$doc->addStyleSheet('templates/' . $this->template . '/css/footable.core.css');
 

4) Adesso che abbiamo installato tutto, dobbiamo assegnare alle tabelle che vogliamo diventino "responsive" dei "parametri".
In pratica dobbiamo semplicemente aggiungere (solo nella prima riga) data-hide="phone" alle colonne che vogliamo "nascondere" su cellulari.
Ecco come modifico la tabella sopra indicata:
<table class="table tabella_reponsive ui-responsive">
<thead>
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Via</th>
<th <strong>data-hide="phone"</strong>>Citta</th>
<th <strong>data-hide="phone"</strong>>Data n</th>
<th <strong>data-hide="phone"</strong>>Professione</th>
<th <strong>data-hide="phone"</strong>>Marca auto</th>
<th <strong>data-hide="phone"</strong>>Modello auto</th>
 
..............................
 

5) Adesso rimpicciolite lo schermo ed aggiornate la pagina dovreste vedere la vostra tabella "compressa" :)
Per vedere la documentazione della libreria usata: http://fooplugins.com/footable-demos/

ALTRE SOLUZIONI
Volendo esistono molte altre soluzioni per la visualizzazione delle tabelle su dispositivi mobili. Ad esempio si potrebbe usare  "jQuery Mobile" che permette di impostare le tabelle in modo che si visualizzino per "verticale", o permette di fare in modo che l'utente possa scegliere quali colonne visualizzare e quali no.

CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Davide
Alcune informazioni su di me:
Sono un programmatore freelance con partita iva. Mi occupo principalmente della creazione di siti web e portali aziendali. Utilizzo Joomla in gran parte dei miei progetti; anche in quelli complessi scrivendo estensioni ed apportando modifiche. Collaboro (come Freelance) con web agency, colleghi o clienti finali.


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Calendario articoli

Dicembre 2017
Lun Mar Mer Gio Ven Sab Dom
27 28 29 30 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Ultima versione di Joomla!®

downloadVer. 3.8.3 Stabile Italiana
Data di rilascio: 12 Dicembre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: