分页组件

分页组件是在前端对数据集进行分页获取数据。

页面中的表格、列表等数据展示组件,可配合使用分页组件来展示下一页的数据。

请求参数

打开浏览器的 F12,查看网络请求链接,当点击分页组件的分页时,会发起一个新的网络请求,其中请求参数包括以下:

  • limit:每页的数据条数,这里测试每页请求 1 条。数据集如果不设置分页数据大小,每页默认是 20 条。
  • offset:请求数据的偏移量,第 1 页从 0 开始。比如 limit = 1,那么第 2 页是 offset = (页码 - 1) limit = (2-1)1 = 1。

点击第 1 页的请求参数:

1718192329623

点击第 2 页的请求参数:

1718192796234

组件使用

一般页面中如果放置了表格、列表之类的数据展示组件,可以在这些组件下边,把分页组件再放入进来,如图所示:

1718246822953

放置后,会提示需要绑定一下数据集,如果此时不做设置,可以后续在组件的右侧属性中再进行绑定。

绑定的数据集就是需要进行分页显示的数据,一般和表格绑定的数据集保持一致。

常用配置

每页条数配置

数据集默认配置

选择数据集后,点击右侧的“编辑”按钮,在弹出配置中,手动设置“分页数据大小”,这里测试选择每页 1 条。

如果不设置,默认为每页 20 条。如果要一页返回全部数据,可以在输入框右侧的 ... 中设置为 -1。

这里设置后,默认数据集请求的时候就会按照该条数返回数据。切换不同的页码时,也是按照此条数进行返回。

1718247627126

分页指定每页条数

除了在数据集上进行配置每页条数,也可以在分页组件中进行配置。

分页组件默认已经设置了“指定每页条数”,但默认没有显示出来,还需要额外设置“显示切换器”为是。

1718248191788

配置后,显示效果如图所示:

1718248322328

在分页组件上切换不同的条数,会覆盖之前数据集默认设置的条数,以分页设置的为先。

一页时隐藏分页

如果数据量较少,只有一页数据,可以配置“一页时隐藏分页”为是。

1718248566557

配置后,整个分页组件都不会显示出来:

1718248681612

显示总记录数

默认没有显示总数据量,可以在右侧的“显示总记录数”选择其中一个样式进行设置。

1718248831220

配置后,显示效果如图所示:

1718249047977

results matching ""

    No results matching ""