TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere un widget tabella dati avanzata in Weebly?

1

Puoi creare semplici tabelle usando HTML

etichetta. Ma una semplice tabella potrebbe non essere sempre sufficiente per mostrare i tuoi dati e potrebbe essere necessaria una tabella di dati complessa con più funzionalità. Weebly offre l’app Simple Table ufficiale e hai molte altre opzioni per inserire tabelle nel sito Weebly. Tuttavia, a differenza di WordPress che ha plugin dedicati per inserire tabelle complesse, Weebly non ha un’opzione integrata.

Se desideri aggiungere tabelle di big data in Weebly, qui spiegheremo come aggiungere widget di tabelle di dati avanzate utilizzando un plug-in jQuery da datatables.net. La tabella apparirà come di seguito. Questo codice si basa sul popolare framework Bootstrap e spiegheremo anche come aggiungere questo widget al tuo sito Weebly.

Come aggiungere un widget tabella dati avanzata in Weebly?

Tabella dati avanzata Bootstrap

Caratteristiche della tabella dati

Il widget della tabella dati avanzata avrà le seguenti caratteristiche:

  • Ordinabile in base a qualsiasi singola colonna.
  • Completamente reattivo realizzato con Bootstrap.
  • Filtra il contenuto con 10, 25, 50 e 100 record per pagina.
  • Casella di ricerca per cercare il contenuto in una qualsiasi delle celle della tabella.
  • Impaginazione elegante per navigare in qualsiasi pagina della tabella con l’opzione pagina precedente e successiva.
  • Mostra il numero di voci visualizzate insieme al numero totale di voci presenti nella tabella.

Scarica il codice completo

Scarica il codice completo per il widget della tabella dati avanzata. Il file di archivio contiene i seguenti file:

  • tabella-avanzata.html
  • dataTables.bootstrap.css
  • bootstrap.min.css
  • jquery.min.js
  • bootstrap.min.js
  • dataTables.bootstrap.js
  • jquery.dataTables.js

I file CSS e JS sono memorizzati all’interno delle cartelle "CSS" e "JS" per una struttura appropriata e il file HTML risiede all’esterno di queste risorse. È possibile utilizzare qualsiasi struttura per memorizzare i file CSS / JS ma è necessario aggiungere i collegamenti correttamente in base alla struttura da collegali nel file HTML. Se questo è un compito difficile per te, prendi in considerazione l’utilizzo di costruttori di siti Web Bootstrap come Mobirise. Offrono blocchi già pronti da inserire nel tuo sito e pubblicare rapidamente.

Ci sono tre passaggi per aggiungere il widget della tabella dati:

1 Aggiungere CSS in Weebly

Aggiungi il seguente CSS alla sezione del codice dell’intestazione della tua pagina:

<link rel="stylesheet" href="css/bootstrap.min.css">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/dataTables.bootstrap.css"/> <style> .table-responsive { overflow-x: hidden; } @media (max-width: 800px) { .table-responsive { overflow-x: auto; } </style>

Qui abbiamo utilizzato il collegamento CDN per collegare icone fantastiche di caratteri, se hai ospitato icone fantastiche di caratteri sul tuo sito, non è necessario aggiungere questo collegamento separatamente. Assicurati di sostituire i collegamenti "bootstrap.min.css" e "dataTables.bootstrap.css" con i collegamenti corretti dal tuo sito.

2 Aggiunta di script

Aggiungi gli script seguenti alla sezione del codice a piè di pagina della tua pagina:

<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.dataTables.js"></script> <script src="js/dataTables.bootstrap.js"></script> <script> $(document).ready(function() { $('#dataTables-example').dataTable(); }); </script>

Abbiamo utilizzato la libreria jQuery di Google con "jquery.min.js", ricorda che il widget non funzionerà senza questo script jQuery. Se il tuo sito utilizza jQuery per impostazione predefinita, potrebbe non essere necessario menzionare separatamente questo collegamento in base alle versioni.

3 Aggiungere HTML

Aggiungi il codice HTML sottostante all’interno di un elemento di codice di incorporamento. In questo esempio, stiamo creando una tabella con 5 colonne e il codice contiene i dati per l’intestazione e una riga. Puoi copiare/incollare i dati della riga per aggiungere altrettante righe alla tabella. Assicurati di aggiungere tutti i valori delle celle, nonché l’intestazione e le righe con lo stesso numero di colonne affinché la tabella funzioni correttamente. È possibile utilizzare il trattino (-) per indicare i dati vuoti.

<div class="panel-body"> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover" id="dataTables-example"> <!-- This is the header section of the table --> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <!-- End of table header --> <tbody> <!-- This is the start of first row of the table --> <tr> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td>4</td> <td>X</td> </tr> <!-- End of first row (copy and paste this block to append additional rows --> <!-- Paste additional rows here --> </tbody> </table> </div> </div>

Scopri di più su come inserire i codici nelle sezioni di intestazione e piè di pagina del tuo sito Weebly.

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More