TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як додати розширений віджет таблиці даних у Weebly?

22

Ви можете створювати прості таблиці за допомогою HTML

тег. Але простої таблиці може не завжди бути достатньо для демонстрації ваших даних, і може знадобитися складна таблиця даних з декількома функціями. Weebly пропонує офіційний додаток Simple Table, і у вас є інші варіанти вставлення таблиць на веб -сайт Weebly. Однак, на відміну від WordPress, який має спеціальні плагіни для вставлення складних таблиць, у Weebly немає вбудованої опції.

Якщо ви хочете додати таблиці великих даних у Weebly, тут ми пояснимо, як додати розширений віджет таблиці даних за допомогою плагіна jQuery з datatables.net. Таблиця буде виглядати так, як показано нижче. Цей код заснований на популярній платформі Bootstrap, і ми також пояснимо, як додати цей віджет на ваш сайт Weebly.

Як додати розширений віджет таблиці даних у Weebly?

Розширена таблиця даних Bootstrap

Особливості таблиці даних

Віджет розширеної таблиці даних матиме такі функції:

  • Сортування на основі будь -якого окремого стовпця.
  • Повністю чуйний, зроблений за допомогою Bootstrap.
  • Фільтруйте вміст із 10, 25, 50 та 100 записами на сторінку.
  • Вікно пошуку для пошуку вмісту в будь -якій клітинці таблиці.
  • Стильна сторінка для переходу на будь -яку сторінку таблиці з можливістю попередньої та наступної сторінки.
  • Показує кількість записів, що відображаються разом із загальною кількістю записів, наявних у таблиці.

Завантажте повний код

Завантажте повний код віджета розширеної таблиці даних. Архівний файл містить такі файли:

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

Файли CSS та JS зберігаються у папках "CSS" та "JS" для відповідної структури, а файл HTML знаходиться поза цими ресурсами. Ви можете використовувати будь -яку структуру для зберігання файлів CSS / JS, але ви повинні правильно додати посилання на основі структури до зв’яжіть їх у файлі HTML. Якщо це важке завдання для вас, подумайте про використання конструкторів веб-сайтів Bootstrap, таких як Mobirise. Вони пропонують готові блоки, які можна вставити на ваш сайт і швидко опублікувати.

Додати віджет таблиці даних можна в три кроки:

1 Додавання CSS у Weebly

Додайте наступний CSS до розділу коду заголовка вашої сторінки:

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

Тут ми використовували посилання CDN для підключення чудових значків шрифтів, якщо ви розмістили чудові значки шрифтів на своєму сайті, вам не потрібно додавати це посилання окремо. Обов’язково замініть посилання “bootstrap.min.css" та “dataTables.bootstrap.css” правильними посиланнями з вашого сайту.

2 Додавання сценарію

Додайте наведені нижче сценарії до розділу коду нижнього колонтитула вашої сторінки:

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

Ми використовували бібліотеку jQuery Google із “jquery.min.js”, пам’ятайте, що віджет не працюватиме без цього сценарію jQuery. Якщо ваш сайт використовує jQuery за замовчуванням, можливо, вам не доведеться окремо згадувати це посилання залежно від версій.

3 Додавання HTML

Додайте наведений нижче код HTML всередину елемента коду для вбудовування. У цьому прикладі ми створюємо таблицю з 5 стовпцями, а код містить дані для заголовка та одного рядка. Ви можете скопіювати / вставити дані рядків, щоб додати якомога більше рядків до таблиці. Щоб таблиця працювала належним чином, додайте всі значення комірок, а також заголовок і рядки з однаковою кількістю стовпців. Ви можете використовувати дефіс (-) для позначення порожніх даних.

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

Дізнайтеся більше про те, як вставляти коди у розділи верхнього та нижнього колонтитулів вашого сайту Weebly.

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі