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

最新推荐文章于 2025-07-28 23:31:49 发布

原创最新推荐文章于 2025-07-28 23:31:49 发布 · 550 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#数据分析 #数据可视化 #信息可视化 #echarts #javascript #http

数据可视化同时被 2 个专栏收录

41 篇文章

订阅专栏

41 篇文章

订阅专栏

DataGear 数据可视化分析平台（ http://datagear.tech ）在新发布的5.4.1版本中，HTTP数据集新增了附加数据功能，可配置读取HTTP数据源JSON响应中的部分数据作为数据集附加数据，结合内置表格图表新增的serverSidePaging选项功能，仅需通过简单的配置，即可为表格添加HTTP数据源服务端分页功能。

本文将介绍如何通过上述特性制作支持服务端分页、关键字查询、单字段排序的HTTP数据源服务端分页数据表格看板。

假设有HTTP数据源，访问地址为http://192.16.1.1:8080/api/data，接受如下分页查询JSON请求体参数：

{
  pageIndex: 数值,  //页索引，以0开头
  pageLength: 数值,  //页大小
  searchKeyword: "...",  //可选，查询关键字
  order:{  //可选，排序信息
    name: "...",  //排序名
    direction: "..."  //排序方向："asc"、"desc"
  }
}

返回如下分页查询结果：

{
  datas: [ { ... }, ... ], //页数据
  totalRecords: 数值,  //总记录数
  ...
}

首先，新建一个HTTP数据集HTTP分页查询，从上述数据源中读取数据：

在这里插入图片描述

请求体类型：JSON载荷

请求体：

{
  pageIndex: ${分页索引},
  pageLength: ${分页大小},
  searchKeyword: <#if 查询关键字??>"${查询关键字}"<#else>null</#if>,
  <#if 排序名??>
  order:{
    name: "${排序名}",
    direction: "${排序方向}"
  }
  </#if>
}

响应数据JSON路径：datas

响应附加数据配置：{ total: "totalRecords" }

参数：

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

上述响应附加数据配置{ total: "totalRecords" }表示：将HTTP数据源中的totalRecords设置为以total标识的数据集附加数据

然后，新建一个HTTP分页查询表格表格图表，绑定上述HTTP分页查询数据集：

在这里插入图片描述

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

{
  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.start, data.length,
              (data.search.value ? data.search.value : null), 
              (data.order[0] ? data.order[0].name : null),
              (data.order[0] ? data.order[0].dir : null)
          ]);
    },
    totalAdditionName: "total"
  }
}