前端 | maven项目基于Mybatis插件【PageHelper分页】2

最新推荐文章于 2024-08-14 20:18:15 发布

cungudafa

最新推荐文章于 2024-08-14 20:18:15 发布

阅读量1.1k

点赞数

分类专栏： # SSM Java前后端开发学习文章标签：前端分页详细原理及步骤讲解 Mybatis插件PageHeper分页

本文链接：https://blog.csdn.net/cungudafa/article/details/98207122

版权

Java前后端开发学习同时被 2 个专栏收录

58 篇文章 5 订阅

订阅专栏

SSM

23 篇文章 3 订阅

订阅专栏

PageHelper分页

序
- 实现效果
正文

序

~~超简单、超详细~~

实现效果

样式
动画演示：

maven项目中，分页方式还有【Pager-taglib分页】方式
参考我前一篇博客：https://blog.csdn.net/cungudafa/article/details/98076810

正文

1.准备

环境
IDEA2019+maven3.6.0+mysql8.0+tomcat9.0
方法：
springmvc+Mybatis

主要涉及jar包：pagehelper、jsqlparser

参考1：pagehelper使用文档：
https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/zh/HowToUse.md）

	 <!-- 分页插件2,使用pageHelper插件 -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.2</version>
    </dependency>
     <!--jsqlparser-->
    <dependency>
      <groupId>com.github.jsqlparser</groupId>
      <artifactId>jsqlparser</artifactId>
      <version>1.0</version>
    </dependency>

注意: tips.在前面我用了Pager-taglib-2.0.jar分页方式进行maven分页，需要在pom.xml中将Pager-taglib2注释掉，因为同一个项目中不能引入两种分页格式，有歧义。
在这里插入图片描述

2.原理

前端着手
2.1 引入的样式文件

<link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/statics/css/bootstrap3.min.css" >

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/bootstrap-paginator.js"></script>

2.2 基于BootStrap3对Table及页面进行美化

2.2.1table获取到后端返回的pageInfo，并调用c标签将循环渲染到表格中

<!--通过bootstrap的栅格系统布局-->
<div class="container">
    <!--显示表格数据-->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover">
                <tr>
                    <th>#</th>
                    <th>title</th>
                    <th>typeid</th>
                    <th>time</th>
                    <th>author</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${pageInfo.list}" var="t">
                    <tr>
                        <td><c:out value="${t.id}"/></td>
                        <td><c:out value="${t.title}"/></td>
                        <td><c:out value="${t.typeid}"/></td>
                        <td><c:out value="${t.time}"/></td>
                        <td><c:out value="${t.author}"/></td>
                        <td>
                        </td>
                    </tr>
                </c:forEach>

            </table>
        </div>

    </div>

2.2.2分页Page navigation标签（BootStrap3支持样式，4暂不支持）

注意：分页数据必须放在< ul>标签中
在这里插入图片描述
细化页面：

    <!--显示分页信息-->
    <div class="row">
        <!--文字信息-->
        <div class="col-md-6">
            当前第 ${pageInfo.pageNum} 页.总共 ${pageInfo.pages} 页.一共 ${pageInfo.total} 条记录
        </div>

        <!--点击分页-->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">

                    <li><a href="${pageContext.request.contextPath}/news?pn=1">首页</a></li>

                    <!--上一页-->
                    <li>
                        <c:if test="${pageInfo.hasPreviousPage}">
                            <a href="${pageContext.request.contextPath}/news?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                                <span aria-hidden="true">«</span>
                            </a>
                        </c:if>
                    </li>

                    <!--循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接-->
                    <c:forEach items="${pageInfo.navigatepageNums}" var="page_num">
                        <c:if test="${page_num == pageInfo.pageNum}">
                            <li class="active"><a href="#">${page_num}</a></li>
                        </c:if>
                        <c:if test="${page_num != pageInfo.pageNum}">
                            <li><a href="${pageContext.request.contextPath}/news?pn=${page_num}">${page_num}</a></li>
                        </c:if>
                    </c:forEach>

                    <!--下一页-->
                    <li>
                        <c:if test="${pageInfo.hasNextPage}">
                            <a href="${pageContext.request.contextPath}/news?pn=${pageInfo.pageNum+1}"
                               aria-label="Next">
                                <span aria-hidden="true">»</span>
                            </a>
                        </c:if>
                    </li>
                    <li><a href="${pageContext.request.contextPath}/news?pn=${pageInfo.pages}">尾页</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

请求分析：
点击第一页，第二页时：
在这里插入图片描述

2.3 通过springboot调用controller层方法：
处理前端请求：

PageHelper.startPage(pageNum,6);必须在 List<News> news = newsService.getNewsList2();查询语句前

    @RequestMapping("/news")
    public String list(@RequestParam(required = false,defaultValue = "1",value = "pn")Integer pageNum,
                       Map<String,Object> map){

        //引入分页查询，使用PageHelper分页功能
        //在查询之前传入当前页，然后多少记录
        PageHelper.startPage(pageNum,6);
        System.out.println("当前页数是"+pageNum);
        //startPage后紧跟的这个查询就是分页查询
        List<News> news = newsService.getNewsList2();
        //使用PageInfo包装查询结果，只需要将pageInfo交给页面就可以
        PageInfo pageInfo = new PageInfo<>(news,6);
        //pageINfo封装了分页的详细信息，也可以指定连续显示的页数
        map.put("pageInfo",pageInfo);
        System.out.println("当前页数的内容是"+pageInfo);
        return "test";
    }
}

参考：RequestParam用法讲解：https://www.cnblogs.com/moxiaotao/p/9139489.html

required为false：(默认为true 代表必须带参数)
当输入 localhost:8080/news 以及 localhost:8080/news?pageNum=? 方法都能执行
defaultValue的属性:
这样在地址里面也可以不带参数，如果带了参数会接收，不带参数会默认为0
value属性 :前面所有的方法传入的参数必须为pageNum 才能接收到值
加上value属性->这样会用pn 代替pageNum 也就是说你地址里面传入的参数名称为pn时，localhost:8080/news?pn＝？也能获取值

本例：通过

(@RequestParam(required = false,defaultValue = “1”,value = “pn”)Integer pageNum,
Map<String,Object> map)

1、localhost:8080/news 以及 localhost:8080/news?pageNum=? 方法都能执行
2、localhost:8080/news不带参数时，默认为1
3、localhost:8080/news?pn＝？和localhost:8080/news?pageNum=? 都能执行
查询并返回到map-》pageInfo中

3.实现及全部源码

3.1配置

参考链接：
参考2：Mybatis的插件 PageHelper 分页查询使用方法
https://www.cnblogs.com/jpfss/p/8706933.html

引入jar包-见前面pagehelper、jsqlparser
在applicationContext.xml中配置Mybatis拦截器，支持PageHelper插件

<!-- 让MyBatis支持PageHelper插件 -->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <!--使用下面的方式配置参数，一行配置一个 -->
                        <value>
                        </value>
                    </property>
                </bean>
            </array>
        </property>

在这里插入图片描述

3.2在代码中使用

下面是全部源码

package cn.test.controller;

import cn.test.pojo.News;

import cn.test.service.NewsService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/")
public class News2Controller {
    @Autowired
    private NewsService newsService;

    /**
     * RequestParam用法讲解：https://www.cnblogs.com/moxiaotao/p/9139489.html
     * @param pageNum
     * @param map
     * @return
     */
    @RequestMapping("/news")
    public String list(@RequestParam(required = false,defaultValue = "1",value = "pn")Integer pageNum,
                       Map<String,Object> map){

        //引入分页查询，使用PageHelper分页功能
        //在查询之前传入当前页，然后多少记录
        PageHelper.startPage(pageNum,6);
        System.out.println("当前页数是"+pageNum);
        //startPage后紧跟的这个查询就是分页查询
        List<News> news = newsService.getNewsList2();
        //使用PageInfo包装查询结果，只需要将pageInfo交给页面就可以
        PageInfo pageInfo = new PageInfo<>(news,6);
        //pageINfo封装了分页的详细信息，也可以指定连续显示的页数
        map.put("pageInfo",pageInfo);
        System.out.println("当前页数的内容是"+pageInfo);
        return "test";
    }
}

4.在页面获取值实现分页

全部页面：

<%--
  Created by IntelliJ IDEA.
  User: CUNGU
  Date: 2019/7/31
  Time: 12:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName()
            + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/statics/css/bootstrap3.min.css" >
<head>
    <title>PageHelper分页测试</title>
</head>
<body>

<!--通过bootstrap的栅格系统布局-->
<div class="container">

    <!--标题-->
    <div class="row">
        <div class="col-md-12">
            <h1>分页测试</h1>
            SSM-Mybatis的插件 PageHelper
        </div>

    </div>

    <!--按钮-->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary">新增</button>
            <button class="btn btn-danger">删除</button>
        </div>
    </div>

    <!--显示表格数据-->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover">
                <tr>
                    <th>#</th>
                    <th>title</th>
                    <th>typeid</th>
                    <th>time</th>
                    <th>author</th>
                    <th>操作</th>
                </tr>

                <c:forEach items="${pageInfo.list}" var="t">
                    <tr>
                        <td><c:out value="${t.id}"/></td>
                        <td><c:out value="${t.title}"/></td>
                        <td><c:out value="${t.typeid}"/></td>
                        <td><c:out value="${t.time}"/></td>
                        <td><c:out value="${t.author}"/></td>
                        <td>
                            <button class="btn btn-primary">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                编辑
                            </button>

                            <button class="btn btn-danger">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                删除
                            </button>
                        </td>
                    </tr>
                </c:forEach>

            </table>
        </div>

    </div>

    <!--显示分页信息-->
    <div class="row">
        <!--文字信息-->
        <div class="col-md-6">
            当前第 ${pageInfo.pageNum} 页.总共 ${pageInfo.pages} 页.一共 ${pageInfo.total} 条记录
        </div>

        <!--点击分页-->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">

                    <li><a href="${pageContext.request.contextPath}/news?pn=1">首页</a></li>

                    <!--上一页-->
                    <li>
                        <c:if test="${pageInfo.hasPreviousPage}">
                            <a href="${pageContext.request.contextPath}/news?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                                <span aria-hidden="true">«</span>
                            </a>
                        </c:if>
                    </li>

                    <!--循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接-->
                    <c:forEach items="${pageInfo.navigatepageNums}" var="page_num">
                        <c:if test="${page_num == pageInfo.pageNum}">
                            <li class="active"><a href="#">${page_num}</a></li>
                        </c:if>
                        <c:if test="${page_num != pageInfo.pageNum}">
                            <li><a href="${pageContext.request.contextPath}/news?pn=${page_num}">${page_num}</a></li>
                        </c:if>
                    </c:forEach>

                    <!--下一页-->
                    <li>
                        <c:if test="${pageInfo.hasNextPage}">
                            <a href="${pageContext.request.contextPath}/news?pn=${pageInfo.pageNum+1}"
                               aria-label="Next">
                                <span aria-hidden="true">»</span>
                            </a>
                        </c:if>
                    </li>

                    <li><a href="${pageContext.request.contextPath}/news?pn=${pageInfo.pages}">尾页</a></li>
                </ul>
            </nav>
        </div>

    </div>


</div>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/bootstrap-paginator.js"></script>
</body>
</html>

5.后端支持

参考我前一文：https://blog.csdn.net/cungudafa/article/details/97926070#2_71

service：

  List<News> getNewsList2();

serviceImpl：

 @Override
    public List<News> getNewsList2() {
        return newsMapper.getNewsList2();
    }

mapper

List<News> getNewsList2();

Mybatis

<select id="getNewsList2" resultMap="BaseResultMap" parameterType="cn.test.pojo.News" resultType="List" >
    select * from news
  </select>

附：

Bootstrap4 glyphicon 移除图标 glyphicon fonts-faces 解决方案
http://www.bubuko.com/infodetail-2513835.html

cungudafa

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录