TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak dodać zaawansowany widżet tabeli danych w Weebly?

1

Możesz tworzyć proste tabele za pomocą HTML

tag. Jednak prosta tabela może nie zawsze wystarczyć do zaprezentowania danych i może być potrzebna złożona tabela danych z wieloma funkcjami. Weebly oferuje oficjalną aplikację Prosty stół i masz wiele innych opcji wstawiania tabel w witrynie Weebly. Jednak w przeciwieństwie do WordPressa, który ma dedykowane wtyczki do wstawiania złożonych tabel, Weebly nie ma wbudowanej opcji.

Jeśli chcesz dodać duże tabele danych w Weebly, tutaj wyjaśnimy, jak dodać zaawansowany widżet tabeli danych za pomocą wtyczki jQuery z datatables.net. Tabela będzie wyglądać jak poniżej. Ten kod jest oparty na popularnym frameworku Bootstrap i wyjaśnimy również, jak dodać ten widżet do Twojej witryny Weebly.

Jak dodać zaawansowany widżet tabeli danych w Weebly?

Zaawansowana tabela danych Bootstrap

Cechy tabeli danych

Zaawansowany widżet tabeli danych będzie miał następujące funkcje:

  • Możliwość sortowania na podstawie dowolnej pojedynczej kolumny.
  • W pełni responsywny wykonany z Bootstrapem.
  • Filtruj zawartość za pomocą 10, 25, 50 i 100 rekordów na stronę.
  • Pole wyszukiwania, aby przeszukać zawartość dowolnej komórki tabeli.
  • Stylowa paginacja umożliwiająca przechodzenie do dowolnej strony tabeli z opcją poprzedniej i następnej strony.
  • Pokazuje liczbę wyświetlanych wpisów wraz z całkowitą liczbą wpisów obecnych w tabeli.

Pobierz kompletny kod

Pobierz kompletny kod zaawansowanego widżetu tabeli danych. Plik archiwum zawiera następujące pliki:

  • tabela-zaawansowana.html
  • dataTables.bootstrap.css
  • bootstrap.min.css
  • jquery.min.js
  • bootstrap.min.js
  • dataTables.bootstrap.js
  • jquery.dataTables.js

Pliki CSS i JS są przechowywane w folderach „CSS" i „JS”, aby zapewnić odpowiednią strukturę, a plik HTML znajduje się poza tymi zasobami. Możesz użyć dowolnej struktury do przechowywania plików CSS / JS, ale powinieneś dodać linki poprawnie w oparciu o strukturę do połącz je w pliku HTML. Jeśli jest to dla Ciebie trudne zadanie, rozważ użycie kreatorów stron Bootstrap, takich jak Mobirise. Oferują one gotowe bloki do wstawienia na swoją stronę i szybkiego opublikowania.

Aby dodać widżet tabeli danych, należy wykonać trzy kroki:

1 Dodawanie CSS w Weebly

Dodaj następujący kod CSS do sekcji kodu nagłówka swojej strony:

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

Tutaj użyliśmy linku CDN do łączenia wspaniałych ikon czcionek, jeśli hostujesz niesamowite ikony czcionek na swojej stronie, nie musisz dodawać tego linku osobno. Upewnij się, że zastąpiłeś linki „bootstrap.min.css” i „dataTables.bootstrap.css” odpowiednimi linkami z Twojej witryny.

2 Dodawanie skryptu

Dodaj poniższe skrypty do sekcji kodu stopki na swojej stronie:

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

Wykorzystaliśmy bibliotekę Google jQuery z „jquery.min.js”, pamiętaj, że widget nie będzie działał bez tego skryptu jQuery. Jeśli Twoja witryna domyślnie używa jQuery, możesz nie musieć osobno wymieniać tego linku w zależności od wersji.

3 Dodawanie HTML

Dodaj poniższy kod HTML w elemencie kodu do umieszczenia na stronie. W tym przykładzie tworzymy tabelę z 5 kolumnami, a kod zawiera dane dla nagłówka i jednego wiersza. Możesz skopiować / wkleić dane wiersza, aby dodać tyle wierszy do tabeli. Upewnij się, że wszystkie wartości komórek oraz nagłówek i wiersze mają taką samą liczbę kolumn, aby tabela działała poprawnie. Możesz użyć myślnika (-), aby wskazać puste dane.

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

Dowiedz się więcej o wstawianiu kodów w sekcjach nagłówka i stopki witryny Weebly.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów