如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板

DataGear 数据可视化分析平台(http://datagear.tech/) 在新发布的5.4.1版本中,内置表格图表新增了serverSidePaging选项,仅需通过简单的配置,即可为表格添加服务端分页、关键字查询、排序功能。

本文以SQL数据集作为数据源,介绍如何制作具有服务端分页、关键字查询、单列排序功能的数据表格看板。

首选,新建两个SQL数据集,第一个:分页查询数据,用于查询数据;第二个:分页查询总记录数,用于查询总记录数。

分页查询数据详细如下:

SQL:

复制代码
SELECT
	*
FROM
	t_analysis_1
<#if 查询关键字??>
WHERE
	COL_NAME LIKE '%${查询关键字}%'
</#if>
<#if 排序名??>
ORDER BY ${排序名} ${排序方向}
</#if>
LIMIT ${分页索引}, ${分页大小}

参数:

复制代码
名称           类型      必填
查询关键字     字符串     否
排序名         字符串     否
排序方向       字符串     否
分页索引       数值       是
分页大小       数值       是

分页查询总记录数详细如下:

SQL:

复制代码
SELECT
	COUNT(*) AS total
FROM
	t_analysis_1
<#if 查询关键字??>
WHERE
	COL_NAME LIKE '%${查询关键字}%'
</#if>

参数:

复制代码
名称           类型      必填
查询关键字     字符串     否

然后,新建一个分页查询表格表格图表,绑定上述两个数据集,并把分页查询总记录数数据集的【附件】项设置为

分页查询表格详细如下:

复制代码
图表类型:基本表格V2
数据集绑定:分页查询数据、分页查询总记录数(附件)

然后,编辑其【图表选项】,通过serverSidePaging选项将其配置为分页查询表格,具体内容为:

js 复制代码
{
  lengthMenu: [5, 10, 20],
  ordering: true,
  order: [[ 0, 'asc' ]],
  searching: true,
  search: { 'return': true },
  disableSetting: true,
  serverSidePaging: {
    param: function(data, chart){
      chart.dataSetParamValues(0, [data.search.value, 
              (data.order[0] ? data.order[0].name : null),
              (data.order[0] ? data.order[0].dir : null),
              data.start, data.length]);
      chart.dataSetParamValues(1, [data.search.value]);
    },
    totalFieldName: "total"
  }
}

上述配置项详细说明请参考DataGear官网文档【dg-chart-options】章节

点击【保存并展示】按钮,打开图表展示页,服务端分页表格制作完成!

效果图如下所示:

官网地址:

http://www.datagear.tech

源码地址:

GitCode:https://gitcode.com/datageartech/datagear

Gitee:https://gitee.com/datagear/datagear

Github:https://github.com/datageartech/datagear

相关推荐
格调UI成品2 分钟前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl
LilySesy3 分钟前
【案例总结】幽灵单据——消失的交货单号
数据库·ai·oracle·编辑器·sap·abap
看天走路吃雪糕3 分钟前
墨者:SQL注入实战-MySQL
数据库·mysql·base64·sql注入·sqlmap·墨者靶场·tamper
云天徽上7 分钟前
【数据可视化】电信用户流失数据可视化分析:Python + Pyecharts 炫酷大屏(含完整数据、代码)
数据可视化
程序猿小D8 分钟前
Java项目:基于SSM框架实现的进销存管理系统【ssm+B/S架构+源码+数据库+毕业论文+远程部署】
java·数据库·mysql·ssm·jsp·毕业论文·进销存管理系统
gnip13 分钟前
微前端框架选型
前端·javascript
HoHeHa16 分钟前
IDEA 手动下载安装数据库驱动,IDEA无法下载数据库驱动问题解决方案,IDEA无法连接数据库解决方案(通用,Oracle为例)
java·数据库·intellij-idea
22:30Plane-Moon19 分钟前
SQL 查询语法笔记
数据库·笔记·sql
一只小风华~33 分钟前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰38 分钟前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript