这个分页插件好像是国人开发的，有丶厉害。。。

首先导入包

pom.xml
1
2
3
4
5
6
<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>5.1.8</version>
</dependency>

然后在 MyBatis 配置里加载一下分页插件

mybatis-config.xml
1
2
3
4
5
6
7
8
9
<configuration>
    <!--分页插件-->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <property name="helperDialect" value="mysql"/>
            <property name="reasonable" value="true"/>
        </plugin>
    </plugins>
</configuration>

在调用 dao 方法之前，加一句 PageHelper.startPage();，例如在 service 层中

1
2
3
4
5
6
7
8
9
10
11
@Service
public class UserService {
    @Resource
    UserMapper userMapper;

    public List<User> findAllUsers(int page) {
        PageHelper.startPage(page, 2); //第一个参数是当前的页数，第二个参数是每页的个数
        List<User> list = userMapper.findAllUsers();
        return list;
    }
}

它就会自动分页惹。。只查询2个结果出来

在 Cotroller 层返回结果之前，还可以用 new PageInfo(); 获取更详细的分页信息。例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Controller
public class UserController {
    @Resource
    UserService userService;

    @RequestMapping("/userlist")
    public String UserList(@RequestParam(defaultValue = "1")int page, Model model) {

        List<User> list = userService.findAllUsers(page);
        model.addAttribute("list", list);

        PageInfo pageInfo = new PageInfo(list);
        model.addAttribute("pageInfo", pageInfo);
        return "userlist";
    }
}

PageInfo() 返回的内容可以在 官方文档 查看，也可以自己打印出来看一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//用PageInfo对结果进行包装
PageInfo page = new PageInfo(list);
//测试PageInfo全部属性
//PageInfo包含了非常全面的分页属性
assertEquals(1, page.getPageNum());
assertEquals(10, page.getPageSize());
assertEquals(1, page.getStartRow());
assertEquals(10, page.getEndRow());
assertEquals(183, page.getTotal());
assertEquals(19, page.getPages());
assertEquals(1, page.getFirstPage());
assertEquals(8, page.getLastPage());
assertEquals(true, page.isFirstPage());
assertEquals(false, page.isLastPage());
assertEquals(false, page.isHasPreviousPage());
assertEquals(true, page.isHasNextPage());

在前端页面就可以利用这些信息做分页条了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title></title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <script type="application/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
    <script type="application/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <h1>用户列表</h1>
        </div>

        <div class="row">
            <table class="table table-hover">
                <tr>
                    <th>uid</th>
                    <th>username</th>
                    <th>name</th>
                    <th>state</th>
                    <th>operation</th>
                </tr>

                <c:forEach items="${list}" var="item">

                    <tr>
                        <td>${item.uid}</td>
                        <td>${item.username}</td>
                        <td>${item.name}</td>
                        <td>${item.state}</td>
                        <td>
                            <%--<a href="" class="btn btn-primary">编辑</a>--%>

                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editUserModal" data-uid="${item.uid}">编辑</button>


                            <a href="" class="btn btn-danger">删除</a>
                        </td>
                    </tr>

                </c:forEach>
            </table>
        </div>

        <%--分页--%>
        <nav aria-label="...">
            <ul class="pagination">

                <li <c:if test="${!pageInfo.hasPreviousPage}"> class="disabled"</c:if> >
                    <a href="?page=${pageInfo.pageNum-1}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>

                <c:forEach begin="1" end="${pageInfo.pages}" var="i">

                    <li <c:if test="${pageInfo.pageNum==i}">class="active"</c:if>>
                        <a href="?page=${i}">${i}</a>
                    </li>


                </c:forEach>

                <li <c:if test="${!pageInfo.hasNextPage}"> class="disabled"</c:if> >
                    <a href="?page=${pageInfo.pageNum+1}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>


    </div>

    <%--用户编辑模态框--%>
    <div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editUserModalLabel">编辑用户信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="uid-text" class="control-label">uid:</label>
                            <input type="text" class="form-control" id="uid-text"/>
                        </div>
                        <div class="form-group">
                            <label for="username-text" class="control-label">username:</label>
                            <input type="text" class="form-control" id="username-text"/>
                        </div>
                        <div class="form-group">
                            <label for="name-text" class="control-label">name:</label>
                            <input type="text" class="form-control" id="name-text"/>
                        </div>
                        <div class="form-group">
                            <label for="state-text" class="control-label">state:</label>
                            <input type="text" class="form-control" id="state-text"/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确认修改</button>
                </div>
            </div>
        </div>
    </div>

    <script type="application/javascript">

        $('#editUserModal').on('show.bs.modal', function (event) {



            var button = $(event.relatedTarget) // Button that triggered the modal
            var uid = button.data('uid') // Extract info from data-* attributes

            console.log("${pageContext.request.contextPath}/getuserinfo?uid="+uid);

            $.getJSON(
                "${pageContext.request.contextPath}/getuserinfo?uid="+uid,
                function(data) {
                    $.each( data, function( key, val ) {
                        $("#"+key+"-text").val(val);
                    });
                },
                function(){

                }
            );
        })

    </script>
</body>
</html>

上面的代码顺便包含了用 bootstrap 的模态框实现用户编辑的功能 (通过 ajax 拉取用户信息并填充到表格上)