Как добавить виджет расширенной таблицы данных в Weebly? »WebNots

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

. Но простой таблицы не всегда может быть достаточно для демонстрации ваших данных, и может потребоваться сложная таблица данных с несколькими функциями. Weebly предлагает официальное приложение Simple Table, и у вас могут быть другие варианты вставки таблиц на сайт Weebly. Однако, в отличие от WordPress, в котором есть специальные плагины для вставки сложных таблиц, Weebly не имеет встроенной опции.

Если вы хотите добавить большие таблицы данных в Weebly, здесь мы объясним, как добавить виджет расширенной таблицы данных с помощью плагина jQuery от datatables.net. Таблица будет выглядеть, как показано ниже, и вы можете просмотреть живую демонстрацию здесь. Этот код основан на популярной платформе Bootstrap, и мы также объясним, как добавить этот виджет на ваш сайт Weebly.

Особенности таблицы данных

Виджет расширенной таблицы данных будет иметь следующие функции:

• Сортировка по любому столбцу.
• Полностью отзывчивый, сделанный с помощью 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. Они предлагают готовые блоки, которые можно вставить на ваш сайт и быстро опубликовать.

Предложение: Получите 92% скидку на конструктор сайтов Mobirise Bootstrap.

Как добавить виджет расширенной таблицы данных на свой сайт?

Чтобы добавить виджет таблицы данных, нужно выполнить три шага:

1. Добавление CSS в Weebly

Добавьте следующий CSS в раздел кода заголовка своей страницы:

<link rel="stylesheet" href="https://www.webnots.com/bootstrap-advanced-data-table-widget/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="https://www.webnots.com/bootstrap-advanced-data-table-widget/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>

Мы использовали библиотеку Google jQuery с «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. Посмотрите живую демонстрацию виджета расширенной таблицы данных.