Kuinka lisätä Advanced Data Table Widget Weeblyyn?

Voit luoda yksinkertaisia ​​taulukoita HTML -koodilla

-tunniste. Yksinkertainen taulukko ei kuitenkaan aina riitä tietojen esittelyyn, ja saatetaan tarvita monimutkainen tietotaulukko, jossa on useita ominaisuuksia. Weebly tarjoaa virallisen Simple Table -sovelluksen ja sinulla on muita vaihtoehtoja lisätä taulukoita Weebly -sivustoon. Toisin kuin WordPress, jossa on omat laajennukset monimutkaisten taulukoiden lisäämiseen, Weeblyllä ei ole sisäänrakennettua vaihtoehtoa.

Jos haluat lisätä suuria tietotaulukoita Weeblyyn, tässä kerromme, kuinka voit lisätä edistyneen tietotaulukko -widgetin käyttämällä datatables.net -sivuston jQuery -laajennusta. Taulukko näyttää alla olevalta. Tämä koodi perustuu suosittuun Bootstrap -kehykseen, ja selitämme myös, kuinka tämä widget lisätään Weebly -sivustoosi.

Bootstrap Advanced Data Table

Tietotaulukon ominaisuudet

Edistyneen tietotaulukon widgetissä on seuraavat ominaisuudet:

• Lajiteltavissa minkä tahansa yksittäisen sarakkeen perusteella.
• Täysin herkkä Bootstrapilla.
• Suodata sisältö 10, 25, 50 ja 100 tietuetta sivulla.
• Hakukenttä, jos haluat etsiä minkä tahansa taulukon solun sisältöä.
• Tyylikäs sivutus, jolla voit siirtyä mihin tahansa taulukon sivulle, jossa on edellinen ja seuraava sivu.
• Näyttää näytettyjen merkintöjen määrän ja taulukossa olevien merkintöjen kokonaismäärän.

Lataa täydellinen koodi

Lataa täydellisen tietotaulukko -widgetin koodi. Arkistotiedosto sisältää seuraavat tiedostot:

• advanced-table.html
• dataTables.bootstrap.css
• bootstrap.min.css
• jquery.min.js
• bootstrap.min.js
• dataTables.bootstrap.js
• jquery.dataTables.js

CSS- ja JS -tiedostot tallennetaan "CSS" – ja "JS" -kansioihin sopivaa rakennetta varten, ja HTML -tiedosto sijaitsee näiden resurssien ulkopuolella. Voit käyttää mitä tahansa rakennetta CSS / JS -tiedostojen tallentamiseen, mutta sinun on lisättävä linkit oikein rakenteen perusteella linkitä ne HTML-tiedostoon. Jos tämä on sinulle vaikea tehtävä, harkitse Bootstrap-sivustonrakentajien, kuten Mobirisen, käyttöä. Ne ​​tarjoavat valmiita lohkoja, jotka voidaan lisätä sivustoosi ja julkaista nopeasti.

Voit lisätä tietotaulukko -widgetin kolmella tavalla:

1 CSS: n lisääminen Weeblyyn

Lisää seuraava CSS sivusi otsikkokoodiosioon:

<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>

Tässä olemme käyttäneet CDN -linkkiä mahtavien kirjasinkuvakkeiden yhdistämiseen, jos isännöit mahtavia kirjasinkuvakkeita sivustollasi, sinun ei tarvitse lisätä tätä linkkiä erikseen. Muista korvata "bootstrap.min.css" – ja "dataTables.bootstrap.css" -linkit oikeilla linkillä sivustostasi.

2 Skriptin lisääminen

Lisää alla olevat komentosarjat sivusi alatunnisteen osioon:

<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>

Olemme käyttäneet Google jQuery -kirjastoa "jquery.min.js" -palvelun kanssa, muista, että widget ei toimi ilman tätä jQuery -skriptiä. Jos sivustosi käyttää oletusarvoisesti jQueryä, sinun ei ehkä tarvitse erikseen mainita tätä linkkiä versioiden perusteella.

3 HTML -koodin lisääminen

Lisää alla oleva HTML -koodi upotuskoodin elementtiin. Tässä esimerkissä luomme taulukon, jossa on 5 saraketta ja koodi sisältää otsikon ja yhden rivin tiedot. Voit kopioida / liittää rivitiedot lisätäksesi niin monta riviä taulukkoon. Muista lisätä kaikki solun arvot sekä otsikko ja rivit, joissa on sama määrä sarakkeita, jotta taulukko toimii oikein. Voit käyttää väliviivaa (-) ilmaisemaan tyhjiä tietoja.

<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>

Lue lisää koodien lisäämisestä Weebly -sivustosi ylä- ja alatunnisteosioihin.