前言:本人是刚学习java后端不久,所以通过记录一下平时所学知识,方便日后的复习,如果有出错的地方,还望包含。
1、因为使用分页插件,所以整个功能的实现也是非常的简单
首先是导入分页插件相关的坐标,从而可以使用分页插件相关的类。
<!-- 分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.3.0</version>
</dependency>
2、在查找接口中,添加对应的插件功能,提供几个参数供前端进行使用。
@Autowired
private StudentServiceImpl studentService;
@RequestMapping("/findAllStudent")
public String findAllStudent(Model model,@RequestParam(required=true,value="pageNum",defaultValue="1") Integer pageNum){
Page<Student> page = PageHelper.startPage(pageNum, 6); //设置页面的大小
List<Student> list=studentService.findAllStudent();
model.addAttribute("list",list);
model.addAttribute("pageNum", pageNum);
model.addAttribute("totalPages", page.getPages());
return "result";
}
整个分页插件的使用部分,就这些,其他的配置什么的都是插件本身的底层自身实现的,我们只需要提供给前端几个简单的参数供前端使用就行。
相比于后端,前端的使用更加的复杂。
3、前端部分的页面
<!--页码,虽然idea报错,但是没事儿-->
<div class="page" th:if="${totalPages>=1} " style="background: white">
<!-- 页数较少时填充 -->
<div th:if="${totalPages<8}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>
<!--上一页-->
<div class="page-item fl bg-color-f2f2f2">
<a th:href="@{'/findAllStudent/?pageNum='+${pageNum-1}}">
<i class="layui-icon layui-icon-prev"></i>
</a>
</div>
<!--首页-->
<div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==1} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum=1'}">1</a>
</div>
<!--页数过多时的省略号-->
<div class="page-item fl" th:if="${totalPages > 9 && pageNum > 5}">
<img alt="省略" th:src="@{/images/ellipsis.png}"/>
</div>
<!--中间部分的页面显示-->
<div th:if="${totalPages<=9 && totalPages>=3}" th:each="i:${#numbers.sequence(2, totalPages-1)}"
class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
</div>
<div th:if="${totalPages > 9}">
<div th:if="${pageNum <= 5}" th:each="i:${#numbers.sequence(2, 7)}"
class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
</div>
<div th:if="${pageNum >= (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
</div>
<div th:if="${pageNum>5 && pageNum < (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
</div>
</div>
<!--页数过多时的省略号-->
<div th:if="${totalPages > 9 && pageNum < (totalPages-4)}" class="page-item fl">
<img alt="省略" th:src="@{/images/ellipsis.png}"/>
</div>
<!--尾页-->
<div th:if="${totalPages > 1}">
<div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==totalPages} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum='+${totalPages}}" th:text="${totalPages}"></a>
</div>
</div>
<!--下一页-->
<div class="page-item fl bg-color-f2f2f2">
<a th:href="@{'/findAllStudent/?pageNum='+${pageNum+1}}">
<i class="layui-icon layui-icon-next"></i>
</a>
</div>
<!-- 页数较少时填充 -->
<div th:if="${totalPages<9}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>
</div>
注释:将这个界面放在你的展示页面下面就可以生效。
下面是较为完整的前端代码:
<body >
<div class="layui-form" >
<table class="layui-table">
<colgroup>
<col width="100">
<col width="300">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>创建时间</th>
<th>更新时间</th>
<th>操作方式</th>
</tr>
</thead>
<tbody id="tbody">
<tr th:each="item:${list}" th:id="'item-'+${item.getStudentId()}">
<td th:text="${item.getStudentId()}"></td>
<td th:text="${item.getStudentName()}" th:id="'name-'+${item.getStudentId()}"></td>
<td th:text="${item.getStudentSex()}" th:id="'sex-'+${item.getStudentId()}"></td>
<td th:text="${item.getStudentAge()}" th:id="'name-'+${item.getStudentId()}"></td>
<td th:text="${item.getCreateTime()}" th:id="'name-'+${item.getStudentId()}"></td>
<td th:text="${item.getUpdateTime()}" th:id="'name-'+${item.getStudentId()}"></td>
<td>
<a href="/update" shiro:hasPermission="svip">
<button type="button" class="layui-btn" >
<i class="layui-icon"></i></button>
</a>
<a shiro:hasPermission="svip">
<button type="button" class="layui-btn layui-btn-danger" th:onclick="|deleteStudent(${item.getStudentId()})|">
<i class="layui-icon"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!--页码,虽然idea报错,但是没事儿-->
<div class="page" th:if="${totalPages>=1} " style="background: white">
<!-- 页数较少时填充 -->
<div th:if="${totalPages<8}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>
<!--上一页-->
<div class="page-item fl bg-color-f2f2f2">
<a th:href="@{'/findAllStudent/?pageNum='+${pageNum-1}}">
<i class="layui-icon layui-icon-prev"></i>
</a>
</div>
<!--首页-->
<div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==1} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum=1'}">1</a>
</div>
<!--页数过多时的省略号-->
<div class="page-item fl" th:if="${totalPages > 9 && pageNum > 5}">
<img alt="省略" th:src="@{/images/ellipsis.png}"/>
</div>
<!--中间部分的页面显示-->
<div th:if="${totalPages<=9 && totalPages>=3}" th:each="i:${#numbers.sequence(2, totalPages-1)}"
class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
</div>
<div th:if="${totalPages > 9}">
<div th:if="${pageNum <= 5}" th:each="i:${#numbers.sequence(2, 7)}"
class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
</div>
<div th:if="${pageNum >= (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
</div>
<div th:if="${pageNum>5 && pageNum < (totalPages-4)}" th:each="i:${#numbers.sequence(totalPages-6, totalPages-1)}"
class="page-item fl bg-color-f2f2f2" th:style="(${i==pageNum} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum='+${i}}" th:text="${i}"></a>
</div>
</div>
<!--页数过多时的省略号-->
<div th:if="${totalPages > 9 && pageNum < (totalPages-4)}" class="page-item fl">
<img alt="省略" th:src="@{/images/ellipsis.png}"/>
</div>
<!--尾页-->
<div th:if="${totalPages > 1}">
<div class="page-item fl bg-color-f2f2f2" th:style="(${pageNum==totalPages} ? 'background-color:#ffd84d !important;')">
<a th:href="@{'/findAllStudent/?pageNum='+${totalPages}}" th:text="${totalPages}"></a>
</div>
</div>
<!--下一页-->
<div class="page-item fl bg-color-f2f2f2">
<a th:href="@{'/findAllStudent/?pageNum='+${pageNum+1}}">
<i class="layui-icon layui-icon-next"></i>
</a>
</div>
<!-- 页数较少时填充 -->
<div th:if="${totalPages<9}" th:each="i:${#numbers.sequence(1, (9-totalPages)/2)}" class="page-item fl"></div>
</div>
<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js}"></script>
<script th:src="@{https://www.layuicdn.com/layui-v2.5.7/layui.js}"></script>
<script>
function deleteStudent(id) {
$.ajax({
url: "/deleteStudent",
type: "post",
data: {
id: id
},
success: function (data) {
let Jdata = JSON.parse(data);
if (Jdata.code === "200") {
$("#item-"+id).remove();
}
}
})
}
function updateStudentForUI(id) {
let td_name = $("#name-"+id)
let name = td_name.text()
td_name.empty()
td_name.append("<input id='td-name-input-"+id+"' type='text' name='name' value='"+name+"' style='height: 26px;'>")
td_name.append("<button type=\"button\" class=\"layui-btn\" onclick=\"updateStudent("+id+")\"><i class=\"layui-icon\"></i></button>")
}
// function updateStudent(id) {
// let td_name = $("#name-"+id)
// let name = $("#td-name-input-"+id).val();
// $.ajax({
// url: "/updateStudent",
// type: "post",
// data: {
// id: id,
// name: name,
// sex:sex,
// age:age,
// createTime:time;
// },
// success: function (data) {
// let Jdata = JSON.parse(data);
// if (Jdata.code === "200") {
// td_name.empty();
// td_name.text(name)
// }
// }
// })
// }
</script>
</body>
注释:这个是查询学生表的功能,会展示一个layui的界面,查询数据库中的所有的学生表,查询的功能和删除的功能很完善,但是更新的功能有缺陷,还没有时间去解决。
layui引用的是cdn的样式。
下面是是用的cdn,如果有本地的也可以使用本地的。
<!DOCTYPE html>
<!--配置thymeleaf的命名空间-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:clear="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引用layui的css样式 -->
<link rel="stylesheet" type="text/css" th:href="@{https://www.layuicdn.com/layui/css/layui.css}" />
<!-- 引用ajax-->
<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js}"></script>
<!-- 引用js-->
<script th:src="@{https://www.layuicdn.com/layui-v2.5.7/layui.js}"></script>
注释:其他的样式不显示,就是本地的样式,想要使用可以改成自己的本地的样式。
感受,有了分页插件以后,分页很简单,想要移植到其他的地方,也是很简单,只需要改一下参数。