【Java】Java SSM分页（PageHelper）

最新推荐文章于 2021-10-31 12:42:32 发布

_nyc

最新推荐文章于 2021-10-31 12:42:32 发布

阅读量393

点赞数 1

分类专栏： ssm 文章标签： java

本文链接：https://blog.csdn.net/nyc__/article/details/120692467

版权

ssm 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

PageHelper 分页插件

导入Maven依赖

<dependency>
  <groupId>com.github.pagehelper</groupId>
  <artifactId>pagehelper</artifactId>
  <version>5.1.10</version>
</dependency>

在sqlSessionFactory中配置pageHelper

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
  <property name="dataSource" ref="dataSource"/>
  <property name="typeAliasesPackage" value="com.hc.model"></property>

  <!-- 配置pageHelper-->
  <property name="plugins">
      <bean class="com.github.pagehelper.PageInterceptor">
          <property name="properties" value="helperDialect=mysql"/>
      </bean>
  </property>
</bean>

编写mapper接口
```
List<UserInfo> selectAllUserInfo();
```
mybatis 实现接口
```
    <select id="selectAllUserInfo" resultType="com.hc.model.UserInfo">
        select *
        from tb_userinfo
    </select>
```
注意： sql语句最后不要带分号，否则在使用pageHelper分页时会报错，因为pageHelper会在sql语句后面自动的加上 limit 语句进行分页查询；

service层

public PageInfo<UserInfo> userInfoPageInfo(int pageNum, int pageSize){
  PageHelper.startPage(pageNum, pageSize);
  List<UserInfo> userInfos = userInfoMapper.selectAllUserInfo();
  PageInfo<UserInfo> page = new PageInfo<>(userInfos);
  return page;
}

controller

/**
     * 查询用户列表并分页
     * @param pageNum  页码
     * @param pageSize  每页大小
     * @param model   存储数据
     * @return    跳转页面
     * @author  nyc
     */

@RequestMapping("/listPage")
public String listByPage(@RequestParam(defaultValue = "1") int pageNum,
                         @RequestParam(defaultValue = "5") int pageSize,
                         Model model){
  PageInfo<UserInfo> pageInfo = userInfoService.userInfoPageInfo(pageNum, pageSize);
  System.out.println(pageInfo);
  model.addAttribute("page",pageInfo);
  return "userInfo/userList";
}

前端页面

jsp和jquery方法

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户列表</title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .myFont {
            font-size: 20px;
        }
        
        .myFont p{
          display: inline;
      	}

        .center-box {
            margin: 0px auto;
        }
    </style>
</head>
<body>
<div>
    <table class="table table-striped">
        <thead>
        <th>序号</th>
        <th>用户名</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>电话</th>
        <th>电子邮箱</th>
        <th>操作</th>
        </thead>
        <tbody>
        <form id="pageForm" action="/SSM_LOGIN_REGISTER/ssm/userInfo/listPage" method="post">
            <input type="hidden" name="pageNum" value="${page.pageNum}" id="pageNum">
            <input type="hidden" name="pageSize" value="${page.pageSize}" id="pageSize">
        </form>
        <c:forEach var="userInfo" items="${page.list}" varStatus="index">
            <tr>
                <td>${index.index + 1}</td>
                <input type="hidden" name="realId" value="${userInfo.userId}">
                <td>${userInfo.userName}</td>
                <td>${userInfo.name}</td>
                <td>${userInfo.age}</td>
                <td>${userInfo.sex}</td>
                <td>${userInfo.phone}</td>
                <td>${userInfo.email}</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm">修改</a>
                    <a href="#" class="btn btn-danger btn-sm">删除</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<div>
    <nav aria-label="Page navigation center-box" class="center-block">
        <ul class="pagination">
            <li id="prevGroup">
                <a href="#" aria-label="First" id="firstBtn">
                    <span aria-hidden="true">首页</span>
                </a>
                <a href="#" aria-label="Previous" id="previousBtn">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
            <c:forEach var="num" items="${page.navigatepageNums}">
                <li name="pageNum" <c:if test="${num == page.pageNum}"> class="active" </c:if>  >
                    <a href="#" onclick="toNumPage(${num})">${num}</a>
                </li>
            </c:forEach>
            <li id="nextGroup">
                <a href="#" aria-label="Next" id="nextBtn">
                    <span aria-hidden="true">下一页</span>
                </a>
                <a href="#" aria-label="Last" id="lastBtn">
                    <span aria-hidden="true">末页</span>
                </a>
            </li>
            <li class="myFont" style="text-align: center;align-content: center">
                <p>&nbsp;共${page.total}条记录</p>
                <p>&nbsp;共${page.pages}页</p>
                <p>&nbsp;第${page.pageNum}页</p>
                <p>&nbsp;每页显示行数</p>
            </li>
            <li>
                <select name="pageSize" class="input-sm" id="selectPageSize" onchange="pageSizeChange()">
                    <option value="5" <c:if test="${page.pageSize == 5}">selected</c:if>>5</option>
                    <option value="10" <c:if test="${page.pageSize == 10}">selected</c:if>>10</option>
                    <option value="15" <c:if test="${page.pageSize == 15}">selected</c:if>>15</option>
                    <option value="20" <c:if test="${page.pageSize == 20}">selected</c:if>>20</option>
                </select>
            </li>
        </ul>
    </nav>
</div>
</body>
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.min.3.11.js"></script>
<script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
<script>
    //初始化变量
    let pageNum = ${page.pageNum};  //当前页
    let pages = ${page.pages};      //总页数
    let hasPreviousPage = ${page.hasPreviousPage};  //是否有上一页
    let hasNextPage = ${page.hasNextPage};  //是否有下一页

    let pageForm = $("#pageForm");   //表单

    //按钮状态
    //如果没有上一页/下一页，将按钮禁用
    if (!hasPreviousPage) {
        $("#prevGroup").addClass("disabled");
    }
    if (!hasNextPage) {
        $("#nextGroup").addClass("disabled");
    }

    // 点击事件

    //点击首页
    $("#firstBtn").click(function () {
        if (!$("#prevGroup").hasClass("disabled")) {
            $("#pageNum").val(1);
            $("#pageSize").val($("#selectPageSize").val());
            pageForm.submit();      //表单提交
        }
    })

    //点击上一页
    $("#previousBtn").click(function () {
        if (!$("#prevGroup").hasClass("disabled")) {
            $("#pageNum").val(pageNum - 1);
            $("#pageSize").val($("#selectPageSize").val());
            pageForm.submit();
        }
    })

    //点击下一页
    $("#nextBtn").click(function () {
        if (!$("#nextGroup").hasClass("disabled")) {
            $("#pageNum").val(pageNum + 1);
            $("#pageSize").val($("#selectPageSize").val());
            pageForm.submit();
        }
    })

    //点击末页
    $("#lastBtn").click(function () {
        if (!$("#nextGroup").hasClass("disabled")) {
            $("#pageNum").val(pages);
            $("#pageSize").val($("#selectPageSize").val());
            pageForm.submit();
        }
    })

    //点击页码
    function toNumPage(num) {
        $("#pageNum").val(num);
        $("#pageSize").val($("#selectPageSize").val());
        pageForm.submit();
    }

    //选择页码大小
    function pageSizeChange() {
        let changeNum = $("#selectPageSize").val();
        console.log(changeNum);
        $("#pageNum").val(1);
        $("#pageSize").val(changeNum);
        console.log($("#pageSize").val());
        pageForm.submit();
    }
</script>
</html>