TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä Advanced Data Table Widget Weeblyyn?

1

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.

Kuinka lisätä Advanced Data Table Widget Weeblyyn?

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.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja