1.准备
1.pom导入MyBatis插件
<!-- mybatis分页插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.10</version>
</dependency>
2.MyBatis.xml配置文件添加分页插件
<plugins>
<!-- com.github.pagehelper为PageHelper类所在包名 -->
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<!-- 使用下面的方式配置参数-->
<property name="reasonable" value="true"/>
</plugin>
</plugins>
3.Controller层调用
/**
* 获取分页查询到的数据
* @param pageIndex 当前页码
* @return 分页数据与Tbhealth的list数据
*/
@PostMapping ( "/healthPage")
@ResponseBody
public PageInfo getHealth(int pageIndex){
PageHelper.startPage(pageIndex,5);
List<TbHealth> tbHealths = healthMapperService.queryHealthList();
return new PageInfo(tbHealths,7);
}
更多参数请移步PageInfo源码!
4.页面的内容,这里开发需要用的是jsp页面,html同理
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" +
request.getServerName() + ":" +request.getServerPort() +
request.getContextPath() + "/";
%>
<html>
<head>
<title>体检</title>
<base href="<%=basePath%>">
<link rel="stylesheet" href="static/layui/css/layui.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/layui/layui.js"></script>
<style>
a:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="panel-heading">
<h1 class="panel-title">
体检员工
</h1>
</div>
<div class="panel-body">
<table class="table table-hover">
<tr>
<td>编号</td>
<td>身高</td>
<td>血压</td>
<td>心率</td>
<td>体重</td>
<td>视力</td>
<td>血脂</td>
<td>血型</td>
<td>X透视</td>
<td>肝功能</td>
<td>时间</td>
<td>操作1</td>
<td>操作2</td>
<%-- <td>操作3</td>--%>
</tr>
<tbody id="information">
</tbody>
</table>
<form class="bs-example bs-example-form input-group input-group-lg" role="form" name="getPage">
<div class="row">
<br>
<div class="col-lg-6 " >
<div class="input-group">
<input type="text" value="1" class="form-control" name="page">
<span class="input-group-btn">
<button class="btn btn-info" type="button" onclick="gotoPage()">前往</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
<br/>
<button id="firstPagebtnId" class="btn btn-info btn-sm">首页</button>
<button id="prepagebtnId" class="btn btn-info btn-sm">上一页</button>
<button id="nextpagebtnId" class="btn btn-info btn-sm">下一页</button>
<button id="lastpagebtnId" class="btn btn-info btn-sm">尾页</button>
<span id="pageNum"></span><span id="pages"></span>
<span></span>
<br/>
</div>
</body>
</html>
<script>
//当前页数
var pageNum;
//前一页
var prePage;
//下一页
var nextPage;
//是否存在上一页
var hasPreviousPage;
//是否存在下一页
var hasNextPage;
//总页码数
var pages;
//页码加载执行,查看第一页数据
$(function (){
LoadCustomerData(1);
});
//ajax请求
function LoadCustomerData(pageIndex) {
var param={"pageIndex":pageIndex}
$.ajax({
url:"/health/healthPage",
type:"post",
data:param,
dataType:"json",
success:function(data){
//情空旧数据
$("#information").html("");
//添加新的数据
$.each(data.list,function(i,n){
var x_ray;
var liver;
if (n.x_ray===1){
x_ray="正常";
}else{
x_ray="异常";
};
if (n.liver===1){
liver="正常";
}else{
liver="异常";
}
$("#information").append("<tr>")
.append("<td>"+n.user_id+"</td>")
.append("<td>"+n.height+"</td>")
.append("<td>"+n.blood_pressure+"</td>")
.append("<td>"+n.heart_rate+"</td>")
.append("<td>"+n.weight+"</td>")
.append("<td>"+n.vision+"</td>")
.append("<td>"+n.blood_fat+"</td>")
.append("<td>"+n.blood+"</td>")
.append("<td>"+x_ray+"</td>")
.append("<td>"+liver+"</td>")
.append("<td>"+n.check_date+"</td>")
.append("<td><a href='health/checkhealth/" + n.id + " ''>进行体检</a></td>")
.append("<td><a onclick='javascript:return Del("+n.id+","+data.pageNum+")' class='text-info'>删除</a></td>")
.append("</tr>")
});
$("#pageNum").text("当前在第["+data.pageNum+"]页,")
$("#pages").text("总共有"+data.pages+"页")
hasPreviousPage=data.hasPreviousPage;
hasNextPage=data.hasNextPage;
pages=data.pages;
pageNum=data.pageNum;
prePage=data.prePage;
nextPage=data.nextPage;
},
error: function (){
alert("操作错误!")
}
})
}
//首页按钮事件
$("#firstPagebtnId").click(function (){
LoadCustomerData(1);
})
//尾页按钮事件
$("#lastpagebtnId").click(function (){
LoadCustomerData(pages);
})
//下一页按钮事件
$("#nextpagebtnId").click(function (){
//判断是否存在下一页
if (hasNextPage===true){
LoadCustomerData(nextPage);
}else (
layer.msg('已经是最后一页了')
)
});
//上一页按钮事件
$("#prepagebtnId").click(function (){
//判断是否存在上一页
if (hasPreviousPage===true){
LoadCustomerData(prePage);
}
else(layer.msg('已经到第一页啦'))
});
//页码导航
function gotoPage(){
//获取用户输入的页码
var num=getPage.page.value;
//判断页码是否在可用范围
if (num<=0||num>pages){
layer.msg('页码不存在')
}else {LoadCustomerData(num);
}
};
//ajax 删除请求
function Del(id,pageNum){
var msg = "确认删除？";
// alert(id+"--"+pageNum)
if (confirm(msg)===true){
id=parseInt(id)
// alert(id)
$.ajax({
url: "/health/deleteHealth/"+id+"/"+pageNum,
type: "post",
success: function (data) {
$("#information").html("");
//添加新的数据
$.each(data.list, function (i, n) {
var x_ray;
var liver;
if (n.x_ray===1){
x_ray="正常";
}else{
x_ray="异常";
};
if (n.liver===1){
liver="正常";
}else{
liver="异常";
}
$("#information").append("<tr>")
.append("<td>"+n.user_id+"</td>")
.append("<td>"+n.height+"</td>")
.append("<td>"+n.blood_pressure+"</td>")
.append("<td>"+n.heart_rate+"</td>")
.append("<td>"+n.weight+"</td>")
.append("<td>"+n.vision+"</td>")
.append("<td>"+n.blood_fat+"</td>")
.append("<td>"+n.blood+"</td>")
.append("<td>"+x_ray+"</td>")
.append("<td>"+liver+"</td>")
.append("<td>"+n.check_date+"</td>")
.append("<td><a href='health/checkhealth/" + n.id + " ''>进行体检</a></td>")
.append("<td><a onclick='javascript:return Del("+n.id+","+n.pageNum+")' class='text-info'>删除</a></td>")
.append("</tr>")
})
layer.msg('删除成功');
// LoadCustomerData();
}
})
}else{
return false;
}
}
// //确认删除
// function del() {
// var msg = "确认删除？";
// if (confirm(msg)==true){
// return true;
// }else{
// return false;
// }
// }
</script>
5.实现效果
我的数据库
tips:我的项目并没有使用Mybatis-plus,所有只有Mybatis也是可以使用分页插件的,非常方便!