分页插件

添加依赖

1
2
3
4
5
<dependency>
	<groupId>com.github.pagehelper</groupId>
	<artifactId>pagehelper</artifactId>
    <version>5.2.0</version>
</dependency>

配置插件

1
2
3
<plugins>
	<plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
</plugins>

分页插件的使用

几种须知的条件

​ limit index, pageSize

​ index ： 当前页的起始索引

​ pageSize ： 每页显示的数据条数

​ pageNum ： 当前页的页码

​ count ：总记录数

totalPage ：总页数 totalPage = count / pageSize

1
2
3
4
5
//如果从记录数 / 每页显示的数据 结果无法整除
//这种情况就是还有几条多余的数据无法显示，需要我们自己再添加一页进行显示
if(count % pagesize != 0){
    totalPage += 1;
}

举例说明：

1
2
3
4
5
6
7
 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中的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;

后端

  1. 开启分页显示
1
2
3
4
5
6
7
8
@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";
}
  1. 在service层中开启分页以及获取数据，然后将数据回显到controller层
1
2
3
4
5
6
7
8
9
10
11
12
@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;
}

前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  <!--分页的相关功能-->
<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请求映射进行匹配，从而将请求发送至后端来处理