分页插件
添加依赖
代码语言:javascript复制<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.2.0</version>
</dependency>
配置插件
代码语言:javascript复制<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
</plugins>
分页插件的使用
几种须知的条件
limit index, pageSize
index
: 当前页的起始索引
pageSize
: 每页显示的数据条数
pageNum
: 当前页的页码
count
:总记录数
totalPage
:总页数 totalPage = count / pageSize
//如果从记录数 / 每页显示的数据 结果无法整除
//这种情况就是还有几条多余的数据无法显示,需要我们自己再添加一页进行显示
if(count % pagesize != 0){
totalPage = 1;
}
举例说明:
代码语言:javascript复制 pageSize = 4 ,pageNum = 1, index= 0 limit 0 ,4
pageSize = 4 ,pageNum = 3, index= 8 limit 8 ,4
pageSize = 4 ,pageNum = 6, index= 20 limit 20 ,4
//每页显示4条数据 ,如果当前页为1 , 那么数据的索引就是从0开始 ,limit后面的数据就是从0 开始,页面显示数据为4条
//每页显示4条数据 ,如果当前页为3 , 那么数据的索引就是从前两页显示完后的数据(需要显示的数据就是从9 - 12),也就是从2*4=8开始 ,limit后面的数据就是从8开始,页面显示数据为4条
//每页显示4条数据 ,如果当前页为6 , 那么数据的索引就是从前两页显示完后的数据(需要显示的数据就是从21 - 24),也就是从5*4=20开始 ,limit后面的数据就是从20开始,页面显示数据为4条
list.forEach(System.out::println);
列表查询
PageInfo中的属性
代码语言:javascript复制public class PageInfo<T> implements Serializable {
private static final long serialVersionUID = 1L;
private int pageNum; //当前页的页码
private int pageSize; //每页显示的数据
private int size; //当前页显示的真实条数
private int startRow; //当前页从第几行开始
private int endRow; //当前页从而几行结束
private long total; //总共有多少条数据
private int pages; //总共页数
private List<T> list; //存储的数据
private int prePage; //上一页的页码
private int nextPage; //下一页的页码
private boolean isFirstPage;//是否为第一页
private boolean isLastPage;///是否为最后一页
private boolean hasPreviousPage;//是否有上一页
private boolean hasNextPage;//是否有下一页
private int navigatePages;//当前导航分页的页码数
private int[] navigatepageNums;//导航分页的总页码
private int navigateFirstPage;
private int navigateLastPage;
后端
- 开启分页显示
@RequestMapping("/list/{pageNum}")
public String pageStart(@PathVariable("pageNum") Integer pageNum, Model model){
PageInfo<employee> page = employeeService.Page(pageNum);
List<employee> list = page.getList();
model.addAttribute("list",list);
model.addAttribute("page",page);
return "list";
}
- 在service层中开启分页以及获取数据,然后将数据回显到controller层
@Override
public PageInfo<employee> Page(Integer pageNum) {
//开启分页功能,每页显示8条数据
PageHelper.startPage(pageNum,8);
List<employee> list = EmpMapper.selectAll();
for(employee li : list){
dept dept = DeptMapper.selectByPrimaryKey(li.getDeptId());
li.setDep(dept);
}
PageInfo<employee> pageInfo = new PageInfo<>(list,4);
return pageInfo;
}
前端
代码语言:javascript复制 <!--分页的相关功能-->
<div style="text-align: center" >
<!--判断是否有前一页-->
<span th:if="${page.hasPreviousPage}">
<a class="btn btn-sm btn-primary" th:href="@{/list/1}">首页</a>
<a class="btn btn-sm btn-primary" th:href="@{'/list/' ${page.prePage}}">上一页</a>
</span>
<!--显示需要展示的页码范围 ,通过navigatepage 来进行设置范围-->
<span th:each="num : ${page.navigatepageNums}">
<a class="btn btn-sm btn-primary" th:if="${page.pageNum==num}" th:href="@{'/list/' ${num}}" th:text="'[' ${num} ']'" style="color:#d51313;"></a>
<a class="btn btn-sm btn-primary" th:if="${page.pageNum!=num}" th:href="@{'/list/' ${num}}" th:text="${num} "></a>
</span>
<!--判断是否有下一页数据-->
<span th:if="${page.hasNextPage}">
<a class="btn btn-sm btn-primary" th:href="@{'/list/' ${page.nextPage}}">下一页</a>
<a class="btn btn-sm btn-primary" th:href="@{'/list/' ${page.pages}}">末页</a>
</span>
</div>
通过超链接发送请求的参数,然后通过与controller请求映射进行匹配,从而将请求发送至后端来处理