Springboot+PageHelper实现分页(前后端简单展示)
创建表及赋值
--创建表
DROP TABLE IF EXISTS `page_learn`;
CREATE TABLE `page_learn` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一标识',
`t_name` varchar(255) NOT NULL COMMENT 't家族名字',
`t_brithday` datetime DEFAULT NULL COMMENT '出生日期',
`t_hobbies` varchar(255) DEFAULT NULL COMMENT '爱好',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;
--插入数据
INSERT INTO `page_learn` VALUES ('1', 'T一', '2022-04-28 14:53:57', '足球，篮球');
INSERT INTO `page_learn` VALUES ('2', 'T二', '2020-08-19 14:54:38', '足球');
INSERT INTO `page_learn` VALUES ('3', 'T三', '2022-04-05 14:57:00', '羽毛球');
INSERT INTO `page_learn` VALUES ('4', 'T四', '2022-04-06 14:57:30', '乒乓球');
INSERT INTO `page_learn` VALUES ('5', 'T五', '2022-04-12 14:58:16', '排球');
INSERT INTO `page_learn` VALUES ('6', 'T六', '2022-04-05 14:58:40', '篮球，排球');
INSERT INTO `page_learn` VALUES ('7', 'T七', '2022-04-13 14:59:12', '羽毛球，乒乓球');
INSERT INTO `page_learn` VALUES ('8', 'T八', '2022-04-05 15:01:03', '足球，篮球');
INSERT INTO `page_learn` VALUES ('9', 'T九', '2022-04-29 15:01:24', '篮球，排球');
INSERT INTO `page_learn` VALUES ('10', 'T十', '2022-05-08 15:01:51', '排球'); 创建springboot时，勾选好mybatis,mysql,theamleaf。
pom.xml
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.8</version>
</dependency> application.properties
# 应用名称
spring.application.name=my
# 应用服务 WEB 访问端口
server.port=8080
#下面这些内容是为了让MyBatis映射
#指定Mybatis的Mapper文件
mybatis.mapper-locations=classpath:mappers/*xml
#指定Mybatis的实体目录
mybatis.type-aliases-package=com.my.pojo
# 数据库驱动：
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 数据源名称
spring.datasource.name=defaultDataSource
# 数据库连接地址
spring.datasource.url=jdbc:mysql://localhost:3306/mybatis?serverTimezone=UTC&characterEncoding=UTF-8
# 数据库用户名&密码：
spring.datasource.username=root
spring.datasource.password=123456
# THYMELEAF (ThymeleafAutoConfiguration)
# 开启模板缓存（默认值： true ）
spring.thymeleaf.cache=false
# 检查模板是否存在，然后再呈现
spring.thymeleaf.check-template=true
# 检查模板位置是否正确（默认值 :true ）
spring.thymeleaf.check-template-location=true
#Content-Type 的值（默认值： text/html ）
spring.thymeleaf.content-type=text/html
# 开启 MVC Thymeleaf 视图解析（默认值： true ）
spring.thymeleaf.enabled=true
# 模板编码
spring.thymeleaf.encoding=UTF-8
# 要被排除在解析之外的视图名称列表，⽤逗号分隔
spring.thymeleaf.excluded-view-names=
# 要运⽤于模板之上的模板模式。另⻅ StandardTemplate-ModeHandlers( 默认值： HTML5)
spring.thymeleaf.mode=HTML5
# 在构建 URL 时添加到视图名称前的前缀（默认值： classpath:/templates/ ）
spring.thymeleaf.prefix=classpath:/templates/
# 在构建 URL 时添加到视图名称后的后缀（默认值： .html ）
spring.thymeleaf.suffix=.html
pagehelper.helper-dialect=mysql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true 实体类
package com.my.pojo;
import java.util.Date;
public class PageT {
private Integer id;
private String name;
private Date brithday;
private String hobbies;
public PageT(){
}
public PageT(Integer id, String name, Date brithday, String hobbies) {
this.id = id;
this.name = name;
this.brithday = brithday;
this.hobbies = hobbies;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Date getBrithday() {
return brithday;
}
public void setBrithday(Date brithday) {
this.brithday = brithday;
}
public String getHobbies() {
return hobbies;
}
public void setHobbies(String hobbies) {
this.hobbies = hobbies;
}
@Override
public String toString() {
return "PageT{" +
"id=" + id +
", name='" + name + '\'' +
", brithday=" + brithday +
", hobbies='" + hobbies + '\'' +
'}';
}
} mapper层
//mappwer接口
package com.my.mapper;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageInfo;
import com.my.pojo.PageT;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface TMapper {
List<PageT> pages();
}
<!--mapper.xml-->
<?xml version="1.0" encoding="UTF8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.my.mapper.TMapper">
<select id="pages" resultType="com.my.pojo.PageT">
select id,t_name as name,t_brithday as brithday,t_hobbies as hobbies from page_learn
</select>
</mapper> 因为主要实现分页展示，没有写service层
controller层
package com.my.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.my.mapper.TMapper;
import com.my.pojo.PageT;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.List;
@Controller
public class PageController {
@Autowired
private TMapper tMapper;
@RequestMapping("/page")
public String page1(Model model,@RequestParam(defaultValue = "1",value = "pageNum")int pageNum){
PageHelper.startPage(pageNum,4);
List<PageT> list=tMapper.pages();
PageInfo<PageT> pages=new PageInfo<>(list);
model.addAttribute("pageInfo",pages);
return "formList";
}
} formList.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>数据页</title>
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery and JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<view th:class="container" style="padding:60px">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">name</th>
<th scope="col">brithday</th>
<th scope="col">hobbies</th>
</tr>
</thead>
<tbody>
<tr th:each="page:${pageInfo.getList()}">
<th scope="row">[[${page.id}]]</th>
<td>[[${page.name}]]</td>
<td>[[${#dates.format(page.brithday,'yyyy-MM-dd')}]]</td>
<td>[[${page.hobbies}]]</td>
</tr>
</tbody>
</table>
</view>
<view class="container1">
<view class="row">
<view class="col" style="text-align:center">
数据共[[${pageInfo.getTotal()}]]条 当前第[[${pageInfo.getPageNum()}]]页/共[[${pageInfo.getPages()}]]页
</view>
<view class="col">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" th:href="@{/page}">首页</a></li>
<li class="page-item"><a class="page-link" th:href="@{/page(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a></li>
<li class="page-item"><a class="page-link" th:href="@{/page(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a></li>
<li class="page-item"><a class="page-link" th:href="@{/page(pageNum=${pageInfo.pages})}">尾页</a></li>
</ul>
</nav>
</view>
</view>
</view>
</body>
</html> 效果
自己的坑
最开始是将PageInfo对象一步一步拆分，传数据给页面的。改了之后直接传pageInfo对象。
使用PageInfo应看一看源码。了解pageInfo其中的方法。
page与PageInfo的关系。(我看过了，想看的自己查。)
总结pageHelper方法
@Test
public void pageInfo() {
PageHelper.startPage(1, 4);
List<PageT> list = tMapper.pages();
PageInfo<PageT> pageInfo=new PageInfo<>(list);
// PageInfo.getList()
for (PageT t:pageInfo.getList()) {
System.out.println(t);
}
// 总数据条数
long totalNum=pageInfo.getTotal();
// 总页面数
int totalPages=pageInfo.getPages();
// 当前页面
int currentPage=pageInfo.getPageNum();
// 是否有下一页
boolean nextPage=pageInfo.isHasNextPage();
// 是否有上一页
boolean prePage=pageInfo.isHasPreviousPage();
// 是否首页
boolean firstPage=pageInfo.isIsFirstPage();
// 是否尾页
boolean lastPage=pageInfo.isIsLastPage();
System.out.println("总数据条数"+totalNum);
System.out.println("总页面数"+totalPages);
System.out.println("是否有下一页"+nextPage);
System.out.println("是否有上一页"+prePage);
System.out.println("是否首页"+firstPage);
System.out.println("是否尾页"+lastPage);
}
/**
*
PageT{id=1, name='T一', brithday=Thu Apr 28 22:53:57 CST 2022, hobbies='足球，篮球'}
PageT{id=2, name='T二', brithday=Wed Aug 19 22:54:38 CST 2020, hobbies='足球'}
PageT{id=3, name='T三', brithday=Tue Apr 05 22:57:00 CST 2022, hobbies='羽毛球'}
PageT{id=4, name='T四', brithday=Wed Apr 06 22:57:30 CST 2022, hobbies='乒乓球'}
总数据条数10
总页面数3
是否有下一页true
是否有上一页false
是否首页true
是否尾页false
*/