MyBatis-Plus 分页(四)

MyBatis-Plus 分页思路

脚本初始化

省略.. 起码10条数据以上,分页才有意义。

控制器

1
2
3
4
5
6
7
8
9
10
@RequestMapping(value = "/user")
public String user(Model model,
@RequestParam(defaultValue = "1") int current,
@RequestParam(defaultValue = "5") int size) {
Page<User> page = new Page<>(current, size); // 默认每页5行,第1页
IPage<User> userIPage = userMapper.selectPage(page, new QueryWrapper<User>().lambda().eq(User::getActive, 0)); // 查询所有有效用户
model.addAttribute("users", userIPage.getRecords());
model.addAttribute("page", userIPage);
return "user";
}

页面

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
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
th:include="framework/webModel">
<head>
<meta charset="UTF-8">
<title>会员资料管理</title>
</head>
<body>

<div th:fragment="content">

<div class="page-headere">
<h3>资料管理</h3>
</div>
<table class="table table-striped table-hover">
<caption>
<a class="btn btn-success" th:href="@{/demo/user(current=1)}">首页</a>
<a class="btn btn-success" th:href="@{/demo/user(current=${page.getCurrent()-1})}">上一页</a>
<a class="btn btn-success" th:href="@{/demo/user(current=${page.getCurrent()+1})}">下一页</a>
<a class="btn btn-success" th:href="@{/demo/user(current=${page.getPages()})}">尾页</a>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text=" '每页显示:' + ${page.getSize()}">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a th:href="@{/demo/user(current=${page.getCurrent()},size=5)}">5</a></li>
<li><a th:href="@{/demo/user(current=${page.getCurrent()},size=10)}">10</a></li>
<li><a th:href="@{/demo/user(current=${page.getCurrent()},size=20)}">20</a></li>
<li><a th:href="@{/demo/user(current=${page.getCurrent()},size=50)}">50</a></li>
</ul>
</div>
<a class="btn btn-warning pull-right" th:href="@{/demo/toAdd}">新增信息</a>
</caption>

<thead>
<tr>
<!--<th>编号</th>-->
<th>中文姓名</th>
<th>葡文姓名</th>
<th>出生</th>
<th>性别</th>
<th>专长</th>
<th>范畴</th>
<th>职级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td th:text="${user.getId()}" class="hidden">Id</td>
<th th:text="${user.getName()}">Name</th>
<th th:text="${user.getNames()}">Names</th>
<th th:text="${user.getBirth()}">Birth</th>
<th th:text="${user.getGender()}">Gender</th>
<th th:text="${user.getSpeciality()}">Speciality</th>
<th th:text="${user.getCategory()}">Category</th>
<th th:text="${user.getJob()}">Job</th>
<th>
<a class="btn btn-info" th:href="@{/demo/toEdit(id=${user.getId()})}">修改</a>
<a class="btn btn-info" th:href="@{/demo/del(id=${user.getId()})}" onclick="javascript:return del()">删除</a>
</th>
</tr>
</tbody>
</table>

<!-- 分页信息start -->
<nav aria-label="Page navigation">
<ul class="pagination">
<div>
总条数:<span th:text="${page.getTotal()}"></span>&nbsp;&nbsp;
总页数:<span th:text="${page.getPages()}"></span>&nbsp;&nbsp;
当前页码:<span th:text="${page.getCurrent()}"></span>&nbsp;&nbsp;
当前显示数:<span th:text="${page.getSize()}"></span>&nbsp;&nbsp;
</div>
</ul>
</nav>
<!-- 分页信息end -->

<script>
function del() {
var msg = "您真的确定要删除吗?\n\n请确认!";
if (confirm(msg) == true) {
return true;
} else {
return false;
}
}
</script>

</div>

</body>
</html>

思路

根据下面参数:

1
2
3
4
5
6
<div>
总条数:<span th:text="${page.getTotal()}"></span>&nbsp;&nbsp;
总页数:<span th:text="${page.getPages()}"></span>&nbsp;&nbsp;
当前页码:<span th:text="${page.getCurrent()}"></span>&nbsp;&nbsp;
当前显示数:<span th:text="${page.getSize()}"></span>&nbsp;&nbsp;
</div>

可以得到 首页、上一页、下一页、尾页 信息。

效果

默认情况:(第1页,每页5条数据)

情况一:(第2页,每页5条数据)

情况二:(第1页,每页10条数据)

-------------- 本文结束  感谢您的阅读 --------------
0%