在DataEase上支持服务端分页功能（下）

原创

已于 2024-09-15 12:06:38 修改 · 798 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-05-20 14:13:22 首次发布

本文介绍了在DataEase v1.8.0上如何实现前端服务端分页功能。主要涉及接口定义的修改，包括在接口中添加pageNo参数，以及在前后端交互过程中如何获取并使用存储在后台数据库中的分页大小参数tablePageSize和resultMode。前端组件如ChartEdit.vue、UserView.vue、ChartComponentS2.vue和TableNormal.vue等也进行了相应的调整，以支持分页功能。此外，还展示了在设计页面设置的显示模式resultMode下如何处理数据总数。

二、前端服务端分页刷新

前端调用分页接口时，只需要传入chart_id及page即可，pageSize不需要传递，该参数在设计页面设置好后存储在后台数据库中，并以json对象的形式存在，在后端的getPageData实现时通过解析ChartViewDTO对象中的customAtrr属性获得tablePageSize的值，resultMode则是返回ChartViewDTO对象中的resultMode，该值是设计页面设置后存入数据库中的。

frontend 修改文件及代码如下：

1.frontend/src/api/link/index.js（接口定义）

#增加ViewPageInfo接口，在原viewInfo接口的基础上增加了pageNo参数，而分页大小参数则在backend的
getPageData接口实现中从仪表板设计页面的参数对象中解析，这与通常的服务端分页直接从客户端传递分页大小是有差别的。

export function viewPageInfo(id, panelId, data, pageNo) {
  return request({
    url: 'api/link/viewPageDetail/' + id + '/' + panelId + '/' + pageNo,
    method: 'post',
    hideMsg: true,
    data
  })
}

2.frontend/src/api/panel/panel.js（panel接口定义）

#仪表板展示页及详情页面调用的分页接口

export function viewPageData(id, panelId, data, pageNo) {
  return request({
    url: '/chart/view/getPageData/' + id + '/' + panelId + '/' + pageNo,
    method: 'post',
    hideMsg: true,
    data
  })
}