导入依赖
<!--pagehelper-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.2.0</version>
</dependency>
<!--jackson：用来将java对象转换成json格式,配合page使用-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.12.1</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.12.4</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.12.4</version>
</dependency>
在spring的配置文件或者mybatis的配置文件中配置pagehelper
<!--3.sqlSessionFactory-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"></property>
<!--绑定mybatis的配置文件-->
<property name="configLocation" value="classpath:mybatis-config.xml"/>
<!--配置分页拦截器-->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<value>
helperDialect=mysql
</value>
</property>
</bean>
</array>
</property>
</bean>
在业务层中写一个接口并且实现
接口
//分页
PageInfo<User> getPage(Integer pageNum,Integer pageSize);
实现类
@Override
public PageInfo<User> getPage(Integer pageNum, Integer pageSize) {
PageHelper.startPage(pageNum,pageSize);//pageNum:当前页数 pageSize：每页分多少
List<User> list = mapper.queryAllUser();//查询出所有的数据
return new PageInfo<>(list);
}
在controller层写一个控制器调用业务层配合ajax实现
//分页
@RequestMapping("/page")
@ResponseBody
public PageInfo<User> page(Integer pageNum,Integer pageSize){
System.out.println(mapper.getPage(pageNum, pageSize));
return mapper.getPage( pageNum,pageSize);
}
页面使用layui的分页接口
1、头部引入layui和jqury的资源文件
<head>
<meta charset="utf-8">
<title>用户列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<script type="text/javascript"></script>
<script src="../static/jquery-3.5.1/jquery-3.5.1.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述jquery路径需要改成你本地的 -->
</head>
2、layui的分页实现，每次点击页数都会调用写的topage函数，在表格中添加内容
<script src="../static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
//分页
function topage(curr,limit){
$.ajax({
url:"${pageContext.request.contextPath}/user/page",
data:{
'pageNum':curr,'pageSize':limit},
type:"get",
success:function (d) {
//返回的数据中包含了很多跟分页有关的属性，可以打开控制台仔细查看
console.log(d)
console.log(d.list)
$("#bookpage").empty()
$.each(d.list,function (index,item){
var userid="<td>"+item.id+"</td>"
var username="<td>"+item.name+"</td>"
var userCounts="<td>"+item.pwd+"</td>"
var btn="<td><div class='layui-btn-container'><a href='${pageContext.request.contextPath}/user/updateUser?id="+item.id
+"'class='layui-btn layui-btn-normal'>修改</a> <a href='${pageContext.request.contextPath}/user/delete/"+item.id
+"'class='layui-btn layui-btn-danger'>删除</a></div> </td>"
$("#bookpage").append("<tr>")
.append(userid)
.append(username)
.append(userCounts)
.append(btn)
.append("</tr>")
})
}
})
}
layui.use('laypage', function() {
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
, count: 16 //数据总数，从服务端得到
, limit: 3
, jump: function (obj, first) {
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
//do something
topage(obj.curr,obj.limit)
}
}
});
})
</script>
点击第二页后打印到控制台的page数据和我们需要的list数据如下
page
list
