如何设置表格的后端分页|飞书低代码平台

如何设置表格的后端分页|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
应用场景
当数据量较大时,我们一般不会一次性将数千条数据一次性获取到页面上,因为这往往会使得页面的性能变差,体验下降,这种情况下我们建议使用后端分页,在操作分页器、滚动页面时获取更多数据
预期效果
  • 分页器
250px|700px|reset
  • 滚动分页
250px|700px|reset
搭建步骤
目前通过「引导式搭建」已经可以一键生成后端分页逻辑,本文用于阐明后端分页逻辑细节及原理,用于参考学习。
分页器
分页器是一个独立的组件,拖入页面后会暴露「每页条数/pagesize」、「current/当前页码」信息
250px|700px|reset
有了这个信息,我们打开 List 所消费的数据请求,进行如下操作即可:
  1. 分页方式选择为:分页器
  1. 偏移量设置为:{ {(pagination1.current-1)*pagination1.pageSize} }
  • 为什么如此设置呢,首先偏移量是指从数据库表的第几行开始取数,比如表格刚刚加载时预期就是从第 0 行,当翻到第二页且每页展示 5 行,则第二页是从第 5 行之后开始取数,因此刚好可以通过「(当前页面 - 1)* 每页行数」计算得出
  1. 查询记录数:{ {pagination1.pageSize} }
  • 这个比较简单,即每页查询多少行
250px|700px|reset
完成上述配置,我们即实现了一个完整的后端分页,每当页码变化时平台均会自动触发数据请求重新获取数据。
滚动分页
滚动分页一般是移动端列表组件的场景,结合列表组件的「滚动加载更多」事件来使用。
250px|700px|reset
完成了事件配置,我们打开 List 所消费的数据请求,进行如下操作即可:
  1. 分页方式:滚动分页
  1. 查询记录数:配置为你每页想要请求的记录数
  • 滚动分页时,数据请求会自动将多次滚动获取到的多页数据缓存在 query 的 data 属性中
250px|700px|reset
完成上述配置,我们即实现了一个完整的后端滚动分页,每当列表滚动到底部时就会触发加载更多数据。
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
联系我们立即试用