文章目录
前言一、使用步骤1.引入依赖2.创建数据表3.插入测试数据4.编写配置文件5.创建bean层6.编写dao层7.编写service层8.编写service实现类9.编写controller层10.编写页面
前言
分页是每个后端开发者都会用到的技术点，但是对于刚开始接触分页的新手时却还是有点难度的，但是不要怕，今天峰哥就带你简单而又不失优雅的去使用分页。注：下方代码我提供了自己的实体类和建表语句，所以你要是用自己的数据库数据进行测试的话，那么当2、3、5、6就不用看了。 分页效果如下：
一、使用步骤
1.引入依赖
创建maven项目，引入下面依赖
<dependency>
<groupId>org
.mybatis
.spring
.boot
</groupId
>
<artifactId>mybatis
-spring
-boot
-starter
</artifactId
>
<version>2.1.3</version
>
</dependency
>
<!--分页插件 pagehelper
-->
<dependency>
<groupId>com
.github
.pagehelper
</groupId
>
<artifactId>pagehelper
-spring
-boot
-starter
</artifactId
>
<version>1.3.0</version
>
</dependency
>
2.创建数据表
CREATE TABLE `employee`
(
`employee_id`
int NOT NULL AUTO_INCREMENT
,
`employee_name`
varchar(255) NOT NULL
,
`employee_sex`
int NOT NULL
,
`employee_birthday` date NOT NULL COMMENT
'出生日期',
`employee_induction_time` date NOT NULL COMMENT
'入职日期',
`employee_number`
varchar(255) NOT NULL COMMENT
'身份证号',
`employee_phone`
varchar(255) NOT NULL
,
`employee_store`
varchar(255) NOT NULL COMMENT
'所属门店',
`employee_position`
int NOT NULL COMMENT
'0表示店员，1表示店长',
`employee_password`
varchar(255) NOT NULL COMMENT
'员工的登录密码',
PRIMARY KEY
(`employee_id`
)
) ENGINE
=InnoDB AUTO_INCREMENT
=31 DEFAULT CHARSET
=utf8
3.插入测试数据
insert into `employee`
(`employee_id`
,`employee_name`
,`employee_sex`
,`employee_birthday`
,`employee_induction_time`
,`employee_number`
,`employee_phone`
,`employee_store`
,`employee_position`
,`employee_password`
) values
(1,'123456',0,'2020-10-23','2020-10-08','412828199710034651','13233757120','平院1号店',0,'123456'),(2,'张三',1,'2014-11-08','2014-11-08','412828199710034651','13233757120','平院2号店',0,'123456'),(3,'李四',0,'2014-11-10','2020-10-16','412828199710034651','15836778484','平院4号店',0,'123456'),(4,'王五',0,'2014-11-11','2014-11-11','412828199710034651','123456','高铁站店',0,'123456'),(5,'赵六',0,'2014-11-11','2014-11-11','412828199710034651','123456','高铁站店',0,'123456'),(6,'周七',0,'2014-11-11','2014-11-11','412828199710034651','123456','高铁站店',0,'123456'),(7,'吴八',0,'2014-11-11','2014-11-11','412828199710034651','123456','高铁站店',0,'123456'),(8,'田九',1,'2014-11-11','2014-11-11','412828199710034651','123456','高铁站店',0,'123456'),(9,'杨十',0,'2014-11-11','2014-11-11','412828199710034651','41564516','高铁站店',0,'123456'),(10,'杨一',1,'2014-11-11','2014-11-11','412828199710034651','15836718185','高铁站店',0,''),(11,'田二',0,'2014-11-11','2014-11-11','412828199710034651','15836718185','高铁站店',0,''),(12,'吴三',0,'2014-11-11','2014-11-11','412828199710034651','15836718185','高铁站店',0,''),(13,'周四',0,'2014-11-11','2014-11-11','412828199710034651','15836718185','高铁站店',0,''),(14,'赵五',1,'2014-11-11','2014-11-11','412828199710034651','15836718185','高铁站店',0,''),(15,'王六',0,'2014-11-11','2014-11-11','412828199710034651','15836718185','高铁站店',0,''),(16,'李七',0,'2014-11-11','2014-11-11','412828199710034651','15836718185','高铁站店',0,''),(17,'张八',1,'2014-11-10','2014-11-10','412828199710034651','15836718185','高铁站店',0,''),(21,'张九',1,'2014-11-10','2014-11-10','412853819971003461','15694515535','平院2号店',0,''),(22,'张十',0,'2020-10-20','2014-11-10','789615161384631565','15836416868','平院2号店',0,''),(23,'王六',1,'2020-10-27','2020-10-30','498416741684549856','13588645684','平院2号店',0,''),(24,'王王',1,'2020-10-27','2020-10-22','844896518561385138','13697848154','平院1号店',0,''),(25,'王菲',1,'2020-09-15','2020-10-20','489461386518635135','13548354135','平院3号店',0,''),(26,'王宝',1,'2020-10-27','2020-10-27','844896518561385138','13548354135','平院1号店',0,''),(27,'王飞',1,'2020-10-27','2020-10-27','844896518561385138','13548354135','平院1号店',0,''),(28,'王非',1,'2020-10-27','2020-10-27','844896518561385138','13548354135','平院1号店',0,''),(29,'王妃',1,'2020-10-27','2020-10-27','844896518561385138','13548354135','平院1号店',0,''),(30,'王肥',1,'2020-10-27','2020-10-27','844896518561385138','13548354135','平院1号店',0,'');
4.编写配置文件
#分页pagehelper配置
#配置使用哪种数据库语言，不配置的话pageHelper也会自动检测
pagehelper
.helper
-dialect
=mysql
#配置分页参数合理化功能，默认是
false。 #启用合理化时，如果pageNum
<1会查询第一页，如果pageNum
>总页数会查询最后一页； #禁用合理化时，如果pageNum
<1或pageNum
>总页数会返回空数据。
pagehelper
.reasonable
=true
#支持通过Mapper接口参数来传递分页参数，默认值
false，分页插件会从查询方法的参数值中，自动根据上面 params 配置的字段中取值，查找到合适的值时就会自动分页。
pagehelper
.support
-methods
-arguments
=true
#为了支持
startPage(Object params
)方法，增加了该参数来配置参数映射，用于从对象中根据属性名取值
; 可以配置 pageNum
,pageSize
,count
,pageSizeZero
,reasonable，不配置映射的用默认值， 默认值为pageNum
=pageNum
;pageSize
=pageSize
;count
=countSql
;reasonable
=reasonable
;pageSizeZero
=pageSizeZero。
pagehelper
.params
=count
=countSql
5.创建bean层
import org
.springframework
.format
.annotation
.DateTimeFormat
;
import java
.io
.Serializable
;
import java
.util
.Date
;
public class Employee implements Serializable {
private static final long serialVersionUID
= -43024298337613894L
;
private Integer employeeId
;
private String employeeName
;
private Integer employeeSex
;
@DateTimeFormat(pattern
= "yyyy-MM-dd")
private Date employeeBirthday
;
@DateTimeFormat(pattern
= "yyyy-MM-dd")
private Date employeeInductionTime
;
private String employeeNumber
;
private String employeePhone
;
private String employeeStore
;
private Integer employeePosition
;
private String employeePassword
;
public Integer
getEmployeeId() {
return employeeId
;
}
public void setEmployeeId(Integer employeeId
) {
this.employeeId
= employeeId
;
}
public String
getEmployeeName() {
return employeeName
;
}
public void setEmployeeName(String employeeName
) {
this.employeeName
= employeeName
;
}
public Integer
getEmployeeSex() {
return employeeSex
;
}
public void setEmployeeSex(Integer employeeSex
) {
this.employeeSex
= employeeSex
;
}
public Date
getEmployeeBirthday() {
return employeeBirthday
;
}
public Date
getEmployeeInductionTime() {
return employeeInductionTime
;
}
public String
getEmployeeNumber() {
return employeeNumber
;
}
public void setEmployeeNumber(String employeeNumber
) {
this.employeeNumber
= employeeNumber
;
}
public String
getEmployeePhone() {
return employeePhone
;
}
public void setEmployeePhone(String employeePhone
) {
this.employeePhone
= employeePhone
;
}
public String
getEmployeeStore() {
return employeeStore
;
}
public void setEmployeeStore(String employeeStore
) {
this.employeeStore
= employeeStore
;
}
public Integer
getEmployeePosition() {
return employeePosition
;
}
public void setEmployeePosition(Integer employeePosition
) {
this.employeePosition
= employeePosition
;
}
public String
getEmployeePassword() {
return employeePassword
;
}
public void setEmployeePassword(String employeePassword
) {
this.employeePassword
= employeePassword
;
}
public void setEmployeeBirthday(Date employeeBirthday
) {
this.employeeBirthday
= employeeBirthday
;
}
public void setEmployeeInductionTime(Date employeeInductionTime
) {
this.employeeInductionTime
= employeeInductionTime
;
}
@Override
public String
toString() {
return "Employee{" +
"employeeId=" + employeeId
+
", employeeName='" + employeeName
+ '\'' +
", employeeSex=" + employeeSex
+
", employeeBirthday=" + employeeBirthday
+
", employeeInductionTime=" + employeeInductionTime
+
", employeeNumber='" + employeeNumber
+ '\'' +
", employeePhone='" + employeePhone
+ '\'' +
", employeeStore='" + employeeStore
+ '\'' +
", employeePosition=" + employeePosition
+
", employeePassword='" + employeePassword
+ '\'' +
'}';
}
}
6.编写dao层
List
<Employee> findAllEmployee();
**sql语句
**
<select id
="findAllEmployee" resultMap
="BaseResultMap">
select
<include refid
="Base_Column_List"/>
from employee
</select
>
7.编写service层
PageInfo
<Employee> pagingQuery(int pageNum
);
8.编写service实现类
@Override
public PageInfo
<Employee> pagingQuery(int pageNum
) {
PageHelper
.startPage(pageNum
, 6);
List
<Employee> allEmployee
= employeeDao
.findAllEmployee();
PageInfo
<Employee> pageInfo
= new PageInfo<Employee>(allEmployee
);
return pageInfo
;
}
注：我这里的页数大小因为页面需求被我写死了，你们可以根据需要自己修改
9.编写controller层
@GetMapping("pagingSel")
public String
pagingSel(@RequestParam(defaultValue
= "1") int pageNum
,
Model model
) {
PageInfo
<Employee> pageInfo
= employeeService
.pagingQuery(pageNum
);
if (pageInfo
!= null
) {
pageInfo
.getNextPage();
List
<Employee> employeeList
= pageInfo
.getList();
model
.addAttribute("pageInfo", pageInfo
);
model
.addAttribute("employees", employeeList
);
return "find_emp";
} else {
model
.addAttribute("msg", "查找数据为空");
return "find_emp";
}
}
10.编写页面
<div class="ibox-content">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>员工编号
</th>
<th>员工姓名
</th>
<th>性别
</th>
<th>出生年月
</th>
<th>入职日期
</th>
<th>身份证号
</th>
<th>手机号
</th>
<th>所属门店
</th>
<th>操作
</th>
</thead>
<tbody th:if="${msg!=null}">
<tr>
<td th:colspan="8" style="text-align: center">暂无数据
</td>
</tr>
</tbody>
<tbody th:if="${employees!=null}">
<tr th:each="emp:${employees}">
<td th:text="${emp.getEmployeeId()}"></td>
<td th:text="${emp.getEmployeeName()}"></td>
<td th:if="${emp.getEmployeeSex()==0}">
男
</td>
<td th:unless="${emp.getEmployeeSex()==0}">
女
</td>
<td th:text="${#dates.format(emp.getEmployeeBirthday(),'yyyy-MM-dd')}"></td>
<td th:text="${#dates.format(emp.getEmployeeInductionTime(),'yyyy-MM-dd')}"></td>
<td th:text="${emp.getEmployeeNumber()}"></td>
<td th:text="${emp.getEmployeePhone()}"></td>
<td th:text="${emp.getEmployeeStore()}"></td>
<td>
<a class="btn btn-info" th:href="@{/employee/selOneById(empId=${emp.getEmployeeId()})}"
title="修改"><i class="fa fa-pencil"></i></a>
<a class="btn btn-primary"
th:href="@{/employee/delOneEmpPage(empId=${emp.getEmployeeId()})}"
onClick="return confirm('确定删除?');" title="删除"><i
class="fa fa-trash-o"></i></a>
</td>
</tr>
</tbody>
</table>
<div class="btn-group">
<a th:href="@{/employee/pagingSel}">
<button type="button" class="btn btn-white">
首页
</button>
</a>
<tr th:if="${pageInfo.hasPreviousPage}">
<a th:href="@{/employee/pagingSel(pageNum=${pageInfo.prePage})}">
<button type="button" class="btn btn-white">
<i class="fa fa-chevron-left"></i>
</button>
</a>
</tr>
<a th:href="@{/employee/pagingSel(pageNum=1)}" disabled='true'>
<button class="btn btn-white active">1
</button>
</a>
<a th:href="@{/employee/pagingSel(pageNum=2)}" disabled="false">
<button class="btn btn-white">2
</button>
</a>
<a th:href="@{/employee/pagingSel(pageNum=3)}">
<button class="btn btn-white">3
</button>
</a>
<a th:href="@{/employee/pagingSel(pageNum=4)}">
<button class="btn btn-white">4
</button>
</a>
<tr th:if="${pageInfo.hasNextPage}">
<a th:href="@{/employee/pagingSel(pageNum=${pageInfo.nextPage})}">
<button type="button" class="btn btn-white">
<i class="fa fa-chevron-right"></i>
</button>
</a>
</tr>
<a th:href="@{/employee/pagingSel(pageNum=${pageInfo.navigateLastPage})}">
<button type="button" class="btn btn-white">
尾页
</button>
</a>
</div>
<span th:text="第+${pageInfo.pageNum}+页"></span>
<span th:text="共+${pageInfo.pages}+页"></span>
前往第
<input size="5" type="text" id='number' class="btn btn-white" onblur="tiaozhuang();">
页
</input>
</div>
注:我这里使用的是thymeleaf，所以不要忘了在也页面引入下面这个链接
<html lang="en" xmlns:th="http://www.thymeleaf.org">
代码中所用的js函数为:
<script>
function tiaozhuang() {
var pattern = /-?[1-9]\d*/,
num = document.getElementById("number");
if (pattern.test(num.value)) {
location.href = "/employee/pagingSel?pageNum=" + num.value;
} else {
alert("请输入正整数")
}
}
</script>
到这里代码就写完了，有不懂的欢迎下方留言评论
