（5）bootstrap分页查询+pageHelper插件

最新推荐文章于 2024-05-16 07:12:23 发布

北冥友余

最新推荐文章于 2024-05-16 07:12:23 发布

阅读量2.6k

点赞数 3

分类专栏：前端基础

本文链接：https://blog.csdn.net/Edison_03/article/details/75905550

版权

前端基础专栏收录该内容

21 篇文章 0 订阅

订阅专栏

导读：
使用分页技术，发送请求给控制器，拿到数据库数据，再传送给jsp页面显示。
（1）先给出我做的效果显示图
这里写图片描述
这里的页面设计用的是前端框架bootstrap，分页技术用的pageHelper。
（2）用boostrap的栅格系统，设计如下布局

<div class="container">
        <!-- 标题行 -->
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>
        <!-- 按钮行 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">

            </div>
        </div>
        <!-- 表格数据行 -->
        <div class="row">
        </div>
        <!-- 提示分页信息行 -->
        <div class="row">
                <!-- 分页文字信息 -->
                <div class="col-md-6">
                </div>
                <!-- 分页码 -->
                <div class="col-md-6">
                </div>

如图：
这里写图片描述
注：表格的话，使用bootstrap很容易获得，在这里就不在赘述了，后面会贴出整个代码。
（3）分页技术的实现
首先，给出pageHelper的使用说明链接

https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/zh/HowToUse.md

我总结了一下使用方法：
1.在 pom.xml 中添加pageHelper依赖：

<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.0.0</version>
        </dependency>

2.配置拦截器插件（我在这里使用的是方式1：在 MyBatis 配置 xml 中配置拦截器插件）

<!-- com.github.pagehelper为PageHelper类所在包名 -->
    <plugin interceptor="com.github.pagehelper.PageInterceptor">
    <!-- 在这个地方我没有传参，因为暂时用不到 -->
    </plugin>

然后，在LoginController包下接收请求并处理

/**
    * 使用pageHelper插件实现分页查询
     * @param pn：pageNum的缩写，表示页数，默认值为1，即首页。
     * @param model：是MVC里的Model，作用是将用户信息及分页信息存在此model里，以便发送给页面
     * @return ：返回到视图解析器下的jsp页面
     */
    @RequestMapping(value="/userList")
    public String getAllUser(@RequestParam(value="pn",defaultValue="1") Integer pn,Model model) {
        //startPage是PageHelper的静态方法，参数1：默认开始页面，参数2：每页显示数据的条数
        PageHelper.startPage(pn, 5);
        //从当前类下注入的业务层实现类userService中调用方法，该方法所在类利用注入的userDao来调用真正的查询方法查询数据库信息。
        List<User> allUser = userService.getAllUser();
        System.out.println(allUser);
        //使用PageInfo包装查询页面，封装了详细的分页信息.第二个参数表示连续显示的页数
        PageInfo page = new PageInfo(allUser,5);
        //利用userService属性，将分页的信息以及查询出来的信息封装到model里，传送给页面
        model.addAttribute("pageInfo", page);
        return "user_list";
    }

我以为，在这个地方有必要插播一个小广告，PageInfo 类有很多与分页有关又好用的属性以及方法，请往下看PageInfo 类的API：

     //当前页
    private int pageNum;
    //每页的数量
    private int pageSize;
    //当前页的数量
    private int size;
     //总记录数
    private long total;
    //总页数
    private int pages;
    //结果集
    private List<T> list;
    //前一页
    private int prePage;
    //下一页
    private int nextPage;
     //是否为第一页
    private boolean isFirstPage = false;
    //是否为最后一页
    private boolean isLastPage = false;
    //是否有前一页
    private boolean hasPreviousPage = false;
    //是否有下一页
    private boolean hasNextPage = false;
    //导航页码数
    private int navigatePages;
     //所有导航页号
    private int[] navigatepageNums;
    //上面属性的get和set方法。
    public long getTotal()
    ...

最后，说明都写在注释里了

<!-- 提示分页信息行 -->
        <div class="row">
                <!-- 分页文字信息 ：拿到控制器处理请求时封装在pageInfo里面的分页信息-->
                <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">
                      <!-- 
                        1.pageContext.request.contextPath表示当前项目路径，采用的是绝对路径表达方式。一般为http:localhost:8080/项目名 。
                        2.首页，末页的逻辑：pn=1访问第一次，pn=${pageInfo.pages}访问最后一页
                      -->
                       <li>
                            <a href="${pageContext.request.contextPath}/userList.html?pn=1">首页</a>
                       </li>
                       <!-- 如果还有前页就访问当前页码-1的页面， -->
                       <c:if test="${pageInfo.hasPreviousPage}">
                         <li>
                          <a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                       </c:if>
                        <li>
                        <!--遍历所有导航页码，如果遍历的页码页当前页码相等就高亮显示，如果相等就普通显示  -->
                          <c:forEach items="${pageInfo.navigatepageNums }" var="page_Nums">
                            <c:if test="${page_Nums==pageInfo.pageNum }">
                             <li class="active"><a href="#">${page_Nums}</a></li>
                            </c:if>
                            <c:if test="${page_Nums!=pageInfo.pageNum }">
                             <li ><a href="${pageContext.request.contextPath}/userList.html?pn=${page_Nums}">${page_Nums}</a></li>
                            </c:if>
                          </c:forEach>
                        </li>
                         <!-- 如果还有后页就访问当前页码+1的页面， -->
                        <c:if test="${pageInfo.hasNextPage}">
                            <li>
                              <a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum+1}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                              </a>
                            </li>
                        </c:if>
                         <li><a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pages}">末页</a></li>
                      </ul>
                    </nav>
                </div>
        </div>

（4）那么到这里就已经结束了，我最后贴上自己完整的user_list.jsp页面，以供欣赏。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理页面</title>
<!-- Bootstrap -->
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 标题行 -->
        <div class="row">
            <div class="col-md-12">
                <h1>用户管理页面</h1>
            </div>
        </div>
        <!-- 按钮行 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary ">新增</button>
                <button type="button" class="btn btn-danger ">删除</button>
            </div>
        </div>
        <!-- 表格数据行 -->
        <div class="row">
            <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>用户id</th>
                      <th>用户名</th>
                      <th>密码</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                        <!--
                             从Model里拿到存放用户信息的list，在遍历之前要引入核心标签库，uri="http://java.sun.com/jsp/jstl/core" prefix="c"
                             然后使用EL表达式获取user的各个属性值，之后的两个按钮使用bootstrap组件按钮和字体图标，看看官方文档没什么好讲的
                          -->
                      <c:forEach items="${pageInfo.list}" var="user">
                      <tr>
                            <td>${user.id}</td>
                            <td>${user.username}</td>
                            <td>${user.password}</td>
                         <td>
                            <button class="btn btn-primary btn-xs">
                                  编辑<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                            </button>
                            <button class="btn btn-primary btn-xs" aria-label="Left Align">
                                删除<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                            </button>
                         </td>
                    </tr>
                     </c:forEach>
                  </tbody>
            </table>
        </div>
        <!-- 提示分页信息行 -->
        <div class="row">
                <!-- 分页文字信息 ：拿到控制器处理请求时封装在pageInfo里面的分页信息-->
                <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">
                      <!-- 
                        1.pageContext.request.contextPath表示当前项目路径，采用的是绝对路径表达方式。一般为http:localhost:8080/项目名 。
                        2.首页，末页的逻辑：pn=1访问第一次，pn=${pageInfo.pages}访问最后一页
                      -->
                       <li>
                            <a href="${pageContext.request.contextPath}/userList.html?pn=1">首页</a>
                       </li>
                       <!-- 如果还有前页就访问当前页码-1的页面， -->
                       <c:if test="${pageInfo.hasPreviousPage}">
                         <li>
                          <a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                       </c:if>
                        <li>
                        <!--遍历所有导航页码，如果遍历的页码页当前页码相等就高亮显示，如果相等就普通显示  -->
                          <c:forEach items="${pageInfo.navigatepageNums }" var="page_Nums">
                            <c:if test="${page_Nums==pageInfo.pageNum }">
                             <li class="active"><a href="#">${page_Nums}</a></li>
                            </c:if>
                            <c:if test="${page_Nums!=pageInfo.pageNum }">
                             <li ><a href="${pageContext.request.contextPath}/userList.html?pn=${page_Nums}">${page_Nums}</a></li>
                            </c:if>
                          </c:forEach>
                        </li>
                         <!-- 如果还有后页就访问当前页码+1的页面， -->
                        <c:if test="${pageInfo.hasNextPage}">
                            <li>
                              <a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum+1}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                              </a>
                            </li>
                        </c:if>
                         <li><a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pages}">末页</a></li>
                      </ul>
                    </nav>
                </div>
        </div>
    </div>
</body>
</html>

北冥友余

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
（5）bootstrap分页查询+pageHelper插件

导读：使用分页技术，发送请求给控制器，拿到数据库数据，再传送给jsp页面显示。（1）先给出我做的效果显示图这里的页面设计用的是前端框架bootstrap，分页技术用的pageHelper。（2）用boostrap的栅格系统，设计如下布局<div class="container">  <div class="row"
复制链接

扫一扫