SSM整合分页插件

目录

一.环境配置

1.分页插件依赖

2.在Mybatis里面配置的内容

二.使用分页插件

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

2.控制器方法

3.jsp页面进行整理

4.效果

5. 样式

6.常用的数据说明

---

一.环境配置

1.分页插件依赖

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

2.在Mybatis里面配置的内容

<!--   配置分页插件 PageInterceptor-->
   <plugins>
      <plugin interceptor="com.github.pagehelper.PageInterceptor"/>
   </plugins>

二.使用分页插件

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

    public PageInfo<User> findAllUser(int pagNum) {
//        查询之前开启 开启分页功能
        PageHelper.startPage(pagNum,3);
//        查询所有用户信息
        List<User> allUser = userMapper.findAllUser();
//        获取分页相关数据
        PageInfo<User> 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<User> 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]