使用 Forminator 和 wpDataTables 创建惊人的免费前端表格、图形和图表

引入 wpDataTables 集成后,将表单数据转化为有洞察力的表格、图形和图表变得更加容易Forminator 表单.

我们广受欢迎的 5 星级 Forminator 插件 的这个附加组件将允许您可以创建响应式、可排序的表格 &基于 Forminator 的表单、测验和来自 WordPress 网站前端的民意调查提交的图表.

此功能非常适合:

  • 公共目录 – Forminator 表单收集数据并将其显示在可搜索、可排序的表格中.
  • 数据仪表板 – 与上面类似,它可以有不同的图表和表格.
  • 测验领导委员会 – 用于创建领导委员会以显示参加测验的每个人的测验分数并根据他们的排名(人数正确答案).
  • 民意调查 – 可用于在民意调查结束时在图表中显示民意调查数据,您可以将原始民意调查更改为草稿状态.

而且这一切都是免费且简单的!

在本文中,我们将通过创建一个直接从现有 Forminator 表单中绘制的简单数据表,向您展示多么简单.

更具体地说,我们将研究如何为您的 WordPress 网站设置这种协作,并向您展示如何:

然后我们将展示一些其他可能的表格和图表的奖励示例.

在本文结束时,您将看到 Forminator 和 wpDataTables 是如何不能被(表)置顶的!

安装这些插件并继续

首先,您需要安装三个插件.它与其他安装有点不同,因为它使用插件来运行.

首先,这很明显,但是你需要 Forminator.你也可以使用专业版 Forminator(同样适用于 wpDataTables),但不是必需的.

forminator image
如果没有 Forminator,这一切都不会发生.

您还需要下载 wpDataTables 和插件插件 Forminator 表单的 wpDataTables 集成.

Image of Forminator and wpDataTables.
wpDataTables 插件是下一个关键元素.

三个都得到了吗? 太好了! 安装并激活后,您就可以开始使用了.

让我们继续……

创建新表

要创建新表,您将跳入 wpDataTables 来执行此操作.只需从 WordPress 菜单转到 wpDataTables,然后点击创建表格.

您可以从仪表板或菜单执行此操作.

Where you create a table at in wpDataTables.
有两个地方可以创建表格.

然后您需要选择创建链接到现有数据源的数据表选项并点击下一步.

Where you create a data table linked to an existing data source.
此选项是顶部的第一个选项.

WPDataTables 可让您从 Excel、CSV、JSON、XML、序列化 PHP 数组,甚至基于 MySQL 查询的表创建表.

当我们使用 Forminator 创建一个新表时,在新屏幕上,您将从输入数据源类型中选择Forminator Form.. >

Where you implement Forminator.
在下拉菜单中很容易找到.

哦,我有没有提到您需要一个现有的 Forminator 表单、测验或投票来进行抽奖?

如果您需要这方面的帮助,这里有一些我们以前的表单构建帖子可以帮助您:

接下来,选择您要使用的表单、投票或测验来创建一个表格,其中显示选择一个表单生成器表单.

此区域显示您在 Forminator 中创建的所有可用表单.

对于本文,我将使用我创建的一个名为 wpDataTables 测试表单.

Where you choose a Forminator form.
我有几个选项可供选择,但我会使用我为本文创建的示例.

值得注意的是,您要使用的表单、投票或测验必须至少有一个提交存储在您的数据库中,否则您将无法用它创建表格.

如果没有提交,您将收到一条错误消息,指出数据源中的表没有行.

Error message you get when a table has no rows.
嗯!没有行.这是您将收到的错误消息.

话虽如此,该过程的下一步是选择要显示为列的字段.

这会调出您选择使用的 Forminator 表单中的每个字段.选择要显示为列的字段.

一次或单独选择所有字段.

说到支持的表单域,有很多.您可以包括:

  • 姓名(单个和多个)
  • 电子邮件
  • 电话
  • 地址
  • 网站
  • 输入
  • 文本区域
  • 数量
  • 收音机
  • 复选框
  • 计算
  • 选择(单选和多选)
  • 日期选择器(日历、下拉菜单和文本输入)
  • 时间选择器(下拉菜单和数字输入)
  • 文件上传(单个和多个)
  • 发布数据
  • 隐藏字段
  • 货币
  • 支付宝
  • 条纹
  • 电子签名(仅在 Forminator PRO 中可用)

需要记住的是,reCaptcha、HTML、分页符、部分和 GDPR 批准等字段不包括在表格中.

设置完所有字段后,点击保存更改.它会让你有机会……

调整选项和设置

这些其他选项和设置允许您进一步自定义新表格!

请记住,其中一些附加设置仅适用于 wpDataTables 的 Pro 版本;但是,大多数都是免费版本.

以下是所有可以调整和设置的概要:

  1. 数据来源
  2. 显示
  3. 排序和过滤
  4. 表格工具
  5. 占位符
  6. 自定义
  7. Forminator 设置

让我们更详细地了解每一个.

1.数据源: 这是我们刚刚浏览的初始屏幕,您在其中为 Forminator 输入数据源类型.如果您想更改来源和字段,您可以随时重新访问此区域.

The data source tab.
这是我们之前浏览过的同一个标签.

2.显示:您可以为前端显示调整表格的布局.

有一些选项,例如表格标题信息块分页可滚动等.

The display tab.
想要表格标题?在这方面做更多的事情.

此部分有许多不同的调整,因此请务必查看此区域并进行相应更改.

3.排序和过滤:此选项卡为您提供了允许用户过滤和排序前端显示上的数据的选项.选中您要包含的内容的复选框.

Sorting and filtering tab.
请注意,高级自定义过滤器仅是专业版功能.

4.表格工具:您可以在此处启用复制&将选项保存在您的表格中.启用后,下拉菜单会为您提供打印、PDF、CSV、更多选项.

下拉菜单会显示您的所有选项.

保存后,您的用户将可以选择您选择的选项.

5.占位符:这是一个专业选项,占位符类别的所有功能都不能用于从 Forminator 数据生成的表.

6.自定义:这是一个表格样式选项,仅适用于专业版.

7.Forminator 设置: Forminator 的选项区域,您可以在其中按条目 ID 范围和条目日期进行过滤.

The Forminator settings tab.
按条目 ID 范围和条目日期过滤.

配置完所有设置后,您可以复制短代码.

这适用于任何页面、帖子或可接受的小部件.粘贴到您的 WordPress 网站后,您就大功告成了!

The shortcode that you use for wpDataTable
点击短代码旁边的图标自动复制.

如果您需要调整或更改任何内容,您可以随时返回该区域并进行相应更改.

查看 Table 预览和设置列

现在您已经为数据源设置了基础,表格预览和列设置将会出现.

在这里,您可以查看表格的外观、按条目数排序、搜索和编辑.

The table preview.
到目前为止,您可以看到表单中的所有条目.

通过点击每个类别中的齿轮图标,即可找到列设置.

在此区域中,您可以选择更改列位置重命名显示的标题、添加单元格内容后缀等.

每个类别都有自定义选项.

您可以使用 wpDataTables 和 Forminator 创建如此多的选项和变体,因此可能需要多次尝试才能完善您的表格.

表格和图表示例

除了我们刚刚创建的表格之外,这里还有几个可以创建的示例.

您可以设置饼图...

A look at a pie chart.
派,有人吗?

……彩色条形图.

A graph with poll results.
结果出来了.

还有折线图、气泡图、圆环图等可以创建!

Various charts.
有很多图表可供选择.

如您所见,在定制方面有很多可能性.

要查看更多示例,请查看我们的文档.要获得有关创建饼图和图形的更多见解,请务必探索 wpDataTables 广泛的文档.

在他们的游戏(桌面)顶部

Image of forminator working on a table.
Forminator 正在餐桌旁坐下.

Forminator 和 wpDataTables 的动态表格二人组在创建表格时将它们置于游戏的首位!

它们可以轻松定制、编辑和启用,为您的 WordPress 网站打造完美的表格(免费!).

请务必使用 ForminatorwpDataTables.

您的 WordPress 表格将被设置!

0
订阅评论
提醒
0 评论
内联反馈
查看所有评论