如何在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