RuoYi实现数据分页

目录

一、实例简介

登录日志查询：

数据分页作用：

二、前端代码

1、打开操作日志页面源码文件

 2、函数调用链

3、 开发者工具查看前端访问后端信息​编辑

 三、后端代码

函数startPage 和getDataTable

 输出结果：

---

一、实例简介

登录日志查询：

进入方式：系统管理 -> 日志管理 -> 登录日志

 

数据分页作用：

解决数据量大的时候遇到的问题

当数据量大的时候

• 1、前端会显示不及时，存在处理时间过长，内存开销
• 2、传输速度受到影响，带宽压力大
• 3、后端占用内存开销等

• 二、前端代码

• 1、打开操作日志页面源码文件

• 如下图所示，其中<pagination> 组件为分页组件。total初始值为0，需要后端返回数据的总条数，

• getList——界面点下第几页会触发此函数。

• 

 2、函数调用链

getList -> list -> request

 访问后端的URL

HTTP请求方式 对应后端的@GetMapping

3、 开发者工具查看前端访问后端信息

 三、后端代码

后端响应代码如下图，要实现分页需要使用如下两个函数：

1. startPage [使用前端分页参数第几页pageNum 和每页的数量pageSize ]

2. getDataTable

响应前端的HTTP请求，分页需先执行startPage()函数，返回的函数需执行getDataTable()函数包装。

函数startPage 和getDataTable

 输出结果：

LIMIT num：数据的前num 个

LIMIT offset,num：从offset 偏移位置开始的num 个数据