如何在Weebly中添加高级数据表小部件

如何在Weebly中添加高级数据表小部件

您可以使用 HTML标签创建简单的表格。 但是一个简单的表格可能并不总是足以展示您的数据,并且可能需要具有多种功能的复杂数据表格。 Weebly建站提供官方 Simple Table 应用程序,您还有其他选项可以在 Weebly 网站中插入表格。 但是,与具有专用插件来插入复杂表格的 WordPress 不同,Weebly 没有内置选项。

推荐:WordPress深色模式插件Darklup

如果您想在 Weebly 中添加大数据表,这里我们将解释如何使用来自 datatables.net 的 jQuery 插件添加高级数据表小部件。 该表将如下所示。 此代码基于流行的 Bootstrap 框架,我们还将解释如何在您的 Weebly 网站上添加此小部件。

Bootstrap 高级数据表
Bootstrap 高级数据表

数据表的特点

高级数据表小部件将具有以下功能:

  • 可基于任何单列排序。
  • 使用 Bootstrap 制作的完全响应式。
  • 使用每页 10、25、50 和 100 条记录过滤内容。
  • 搜索框搜索任何表格单元格中的内容。
  • 使用上一页和下一页选项导航到表格的任何页面的时尚分页。
  • 显示显示的条目数以及表中存在的条目总数。

下载完整代码

下载高级数据表小部件的完整代码。 存档文件包含以下文件:

  • 高级表.html
  • 数据表.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 文件中。 如果这对您来说是一项艰巨的任务,请考虑使用像 Mobirise 这样的 Bootstrap 网站构建器。 他们提供现成的块以插入您的网站并快速发布。

添加数据表小部件分为三个步骤:

1. 在 Weebly 中添加 CSS

将以下 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>

我们已经使用带有“jquery.min.js”的 Google jQuery 库,请记住,如果没有这个 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建站网站的页眉和页脚部分插入代码。

推荐:Meme生成器插件MeMeMe


发表评论