TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur lägger jag till avancerad datatabell -widget i Weebly?

2

Du kan skapa enkla tabeller med HTML

tagg. Men en enkel tabell är kanske inte alltid tillräckligt för att visa upp din data och det kan finnas ett behov av komplex datatabell med flera funktioner. Weebly erbjuder den officiella Simple Table -appen och du kan ha andra alternativ för att infoga tabeller på Weebly -webbplatsen. Till skillnad från WordPress som har dedikerade plugins för att infoga komplexa tabeller har Weebly dock inget inbyggt alternativ.

Om du vill lägga till stora datatabeller i Weebly, här kommer vi att förklara hur du lägger till avancerad datatabell -widget med ett jQuery -plugin från datatables.net. Tabellen kommer att se ut nedan. Denna kod är baserad på det populära Bootstrap -ramverket och vi kommer också att förklara hur du lägger till denna widget på din Weebly -webbplats.

Hur lägger jag till avancerad datatabell -widget i Weebly?

Bootstrap Advanced Data Table

Funktioner i datatabellen

Den avancerade datatabell -widgeten kommer att ha följande funktioner:

  • Sorterbart baserat på en enskild kolumn.
  • Fullt responsiv gjord med Bootstrap.
  • Filtrera innehållet med 10, 25, 50 och 100 poster per sida.
  • Sökruta för att söka i innehållet i någon av tabellcellerna.
  • Snygg paginering för att navigera till valfri sida i tabellen med föregående och nästa sida.
  • Visar antalet poster som visas tillsammans med det totala antalet poster som finns i tabellen.

Ladda ner hela koden

Ladda ner hela koden för den avancerade datatabell -widgeten. Arkivfilen innehåller följande filer:

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

CSS- och JS -filer lagras i "CSS" och "JS" -mappar för lämplig struktur och HTML -filen ligger utanför dessa tillgångar. Du kan använda vilken struktur som helst för att lagra CSS / JS -filer men du bör lägga till länkarna korrekt baserat på strukturen till länka dem till HTML-filen. Om detta är en svår uppgift för dig, överväg att använda Bootstrap-webbplatsbyggare som Mobirise. De erbjuder färdiga block att infoga på din webbplats och publicera snabbt.

Det finns tre steg för att lägga till datatabell -widgeten:

1 Lägga till CSS i Weebly

Lägg till följande CSS i rubrikkodavsnittet på din sida:

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

Här har vi använt CDN -länken för att ansluta fantastiska teckensnittsikoner, om du var värd för fantastiska teckensnittsikoner på din webbplats behöver du inte lägga till den här länken separat. Se till att ersätta länkarna "bootstrap.min.css" och "dataTables.bootstrap.css" med rätt länkar från din webbplats.

2 Lägga till skript

Lägg till nedanstående skript i sidfotsdelen på din sida:

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

Vi har använt Google jQuery -bibliotek med "jquery.min.js", kom ihåg att widgeten inte fungerar utan detta jQuery -skript. Om din webbplats använder jQuery som standard behöver du kanske inte nämna denna länk separat baserat på versionerna.

3 Lägga till HTML

Lägg till nedanstående HTML -kod i ett inbäddningskodselement. I det här exemplet skapar vi en tabell med fem kolumner och koden innehåller data för rubrik och en rad. Du kan kopiera / klistra in raddata för att lägga till så många rader i tabellen. Se till att lägga till alla cellvärden samt rubrik och rader har samma antal kolumner för att tabellen ska fungera korrekt. Du kan använda bindestreck (-) för att ange tomma data.

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

Läs mer om hur du sätter in koder i sidhuvud och sidfot på din Weebly -webbplats.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer