layui springboot分页
时间: 2023-09-23 11:10:14 浏览: 90
layui实现数据分页功能
Layui和Spring Boot都是非常流行的开源框架,可以很好地实现前后端分离的开发模式。在使用Spring Boot进行开发时,常常需要对数据进行分页查询,而Layui则提供了非常方便的分页组件,可以快速实现分页展示效果。下面介绍一下如何在Spring Boot中使用Layui实现分页查询。
1. 添加Layui依赖
在pom.xml文件中添加以下依赖:
```xml
<dependency>
<groupId>com.github.layui</groupId>
<artifactId>layui</artifactId>
<version>2.5.5</version>
</dependency>
```
2. 创建Controller
在Controller中定义分页查询接口,例如:
```java
@GetMapping("/users")
public Page<User> getUsers(@RequestParam(value = "page", defaultValue = "1") int page,
@RequestParam(value = "limit", defaultValue = "10") int limit) {
Pageable pageable = PageRequest.of(page - 1, limit);
return userRepository.findAll(pageable);
}
```
其中,Pageable和PageRequest是Spring Data提供的分页接口和实现类,userRepository是Spring Data JPA自动生成的Repository接口。
3. 创建页面
在页面中引入Layui的分页组件,例如:
```html
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
</tr>
</thead>
<tbody id="user_table"></tbody>
</table>
<div id="user_pagination"></div>
<script type="text/javascript">
layui.use(['table', 'laypage'], function() {
var table = layui.table;
var laypage = layui.laypage;
laypage.render({
elem: 'user_pagination',
limit: 10,
layout: ['prev', 'page', 'next', 'skip'],
jump: function(obj, first) {
if (!first) {
$.get('/users', {page: obj.curr, limit: obj.limit}, function(res) {
table.reload('user_table', {data: res.content});
});
} else {
$.get('/users', {page: 1, limit: 10}, function(res) {
table.render({
elem: '#user_table',
data: res.content,
cols: [[
{field: 'id', title: 'ID'},
{field: 'username', title: '用户名'},
{field: 'email', title: '邮箱'}
]]
});
});
}
}
});
});
</script>
```
其中,laypage.render方法初始化分页组件,elem参数指定分页组件要渲染的容器,limit参数指定每页显示的记录数,layout参数指定分页组件的布局,jump参数指定分页组件的回调函数。在回调函数中,通过$.get方法向后端发送分页查询请求,根据查询结果重新渲染表格。第一次进入页面时,需要发送一次分页查询请求,获取第一页的数据。
以上就是在Spring Boot中使用Layui实现分页查询的基本流程,具体实现还需要根据具体业务逻辑进行调整。
阅读全文