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.