SSM整合分页插件

目录

一.环境配置

1.分页插件依赖

2.在Mybatis里面配置的内容

二.使用分页插件

1.在ServiceImpl层开启分页插件（即查询数据库前开启）

2.控制器方法

3.jsp页面进行整理

4.效果

5. 样式

6.常用的数据说明

---

一.环境配置

1.分页插件依赖

        <dependency>
            <groupId>com.github.pagehelpergroupId>
            <artifactId>pagehelperartifactId>
            <version>5.1.2version>
        dependency>

2.在Mybatis里面配置的内容

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

二.使用分页插件

1.在ServiceImpl层开启分页插件（即查询数据库前开启）

    public PageInfo findAllUser(int pagNum) {
//        查询之前开启 开启分页功能
        PageHelper.startPage(pagNum,3);
//        查询所有用户信息
        List allUser = userMapper.findAllUser();
//        获取分页相关数据
        PageInfo page = new PageInfo<>(allUser,3);
        return page;
    }

2.控制器方法

注：pageNum设置为包装类很实用

    @RequestMapping("/findAllUser")
    public String findAllUser(Model model,Integer pageNum){
//        不能直接获取员工信息，因为要获取页码数等传递到web
        if (pageNum == null) {
            pageNum=1;
        }
        PageInfo page= userService.findAllUser(pageNum);
        System.out.println("find"+pageNum);
        model.addAttribute("page",page);
        return  "user_list";
    }

3.jsp页面进行整理

<c:forEach var="user" items="${page.list }">
        <tr>
            <td class="row">${user.id}td>
            <td class="row">${user.name}td>
            <td class="row">${user.pwd}td>
            <td class="row">${user.age}td>
            <td class="row">${user.sex}td>
            <td class="row">
                <button id="del" class="btn btn-primary" onclick="delUser(${user.id})">删除button>
                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal2" onclick="findUserById(${user.id})">修改button>
            td>
<%--模态框data-target="#myModal2" id="myModal2" 对应这个--%>
        tr>
    c:forEach>
    <c:if test="${page.hasNextPage}">
    <a href="/findAllUser?pageNum=${page.pageNum+1}">下一页a>
    <a href="/findAllUser?pageNum=${page.lastPage}">末页a>
c:if>
    <span>
            <c:forEach items="${page.navigatepageNums}" var="p">
                <c:if test="${page.pageNum== p}" >
                    <a class="color1" href="/findAllUser?pageNum=${p}" >${p}a>
                c:if>
 
                <c:if test="${page.pageNum!=p}">
                    <a href="/findAllUser?pageNum=${p}">${p}a>
                c:if>
            c:forEach>
    span>
<c:if test="${page.hasPreviousPage}">
    <a href="/findAllUser?pageNum=${page.pageNum-1}">上一页a>
    <a href="/findAllUser?pageNum=1">首页a>
c:if>

4.效果

5. 样式

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
<style type="text/css">
 
 
    body {
        text-align:center;
        font: normal 11px  "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #4f6b72;
        background: #E6EAE9;
    }
 
    a {
        color: #c75f3e;
    }
 
    #mytable {
        width: 700px;
        padding: 0;
        margin: 0;
    }
 
    caption {
        padding: 0 0 5px 0;
        width: 700px;
        font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        text-align: right;
    }
 
    th {
        font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #4f6b72;
        border-right: 1px solid #C1DAD7;
        border-bottom: 1px solid #C1DAD7;
        border-top: 1px solid #C1DAD7;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: left;
        padding: 6px 6px 6px 12px;
        background: #CAE8EA  no-repeat;
    }
 
    th.nobg {
        border-top: 0;
        border-left: 0;
        border-right: 1px solid #C1DAD7;
        background: none;
    }
 
    td {
        border-right: 1px solid #C1DAD7;
        border-bottom: 1px solid #C1DAD7;
        background: #fff;
        font-size:11px;
        padding: 6px 6px 6px 12px;
        color: #4f6b72;
    }
 
 
    td.alt {
        background: #F5FAFA;
        color: #797268;
    }
 
    th.spec {
        border-left: 1px solid #C1DAD7;
        border-top: 0;
        background: #fff no-repeat;
        font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    }
 
    th.specalt {
        border-left: 1px solid #C1DAD7;
        border-top: 0;
        background: #f5fafa no-repeat;
        font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #797268;
    }
    /*---------for IE 5.x bug*/
    html>body td{ font-size:11px;}
    body,td,th {
        font-family: 宋体, Arial;
        font-size: 12px;
    }
    .color1{
        color: blue;
    }
style>

6.常用的数据说明

pageNum：当前页的页码
pageSize：每页显示的条数
size：当前页显示的真实条数
total：总记录数
pages：总页数
prePage：上一页的页码
nextPage：下一页的页码
isFirstPage/isLastPage：是否为第一页/最后一页
hasPreviousPage/hasNextPage：是否存在上一页/下一页
navigatePages：导航分页的页码数
navigatepageNums：导航分页的页码，[1,2,3,4,5]