Springboot+layui实现数据列表及分页功能，通俗易懂，一步到位！
2023-11-14 11:53:54
Springboot + LayUI：打造交互式数据列表和分页功能
前言
在Web开发中，呈现数据列表和提供分页功能至关重要。Springboot是一个流行的Java开发框架，以其轻量级、快速开发和高性能著称。LayUI是一个基于jQuery的UI库，提供美观实用的组件。本文将深入探讨如何将Springboot与LayUI集成，实现数据列表和分页功能。
需求分析
数据列表：
- 显示一张数据表，每行显示一条数据。
- 列包括ID、姓名、年龄和性别。
分页：
- 当数据量较大时，将数据分成多页展示。
- 提供分页导航，包括上一页、下一页和跳转到特定页。
实现步骤
1. 搭建Springboot项目
使用Springboot CLI创建项目，集成Maven依赖管理。
2. 引入LayUI依赖
在项目pom.xml文件中添加LayUI依赖：
<dependency>
<groupId>com.layui</groupId>
<artifactId>layui</artifactId>
<version>2.5.7</version>
</dependency>
3. 构建数据库表
在数据库中创建名为"user"的表，结构如下：
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`age` int(11) DEFAULT NULL,
`gender` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
4. 创建实体类
在Springboot项目中创建实体类，与数据库表对应：
@Entity
@Table(name = "user")
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
@Column(name = "name")
private String name;
@Column(name = "age")
private Integer age;
@Column(name = "gender")
private String gender;
// getters and setters
}
5. 创建Springboot Controller
编写Springboot Controller，处理用户请求：
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/list")
public PageResult<User> list(Integer page, Integer size) {
// 设置默认分页参数
if (page == null || page < 1) {
page = 1;
}
if (size == null || size < 1) {
size = 10;
}
return userService.list(page, size);
}
}
6. 创建LayUI页面
编写LayUI页面，显示数据列表和分页导航：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
{{# layui.each(data.list, function(index, item) { }}
<tr>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
{{# }); }}
</tbody>
</table>
<div class="layui-laypage layui-laypage-limits">
<select name="pageSize" lay-filter="pageLimit">
<option value="10">10条/页</option>
<option value="20">20条/页</option>
<option value="30">30条/页</option>
<option value="50">50条/页</option>
<option value="100">100条/页</option>
</select>
<a href="javascript:;" class="layui-laypage-prev" data-page="1">首页</a>
<a href="javascript:;" class="layui-laypage-next" data-page="{{ data.hasNextPage ? data.pageNum + 1 : data.pageNum }}">下一页</a>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use(['table', 'laypage'], function () {
var table = layui.table;
var laypage = layui.laypage;
var pageNum = 1; // 当前页码
var pageSize = 10; // 每页显示条数
// 初始化表格
table.render({
elem: '#dataTable',
limit: pageSize,
page: false, // 不开启内置的分页
url: '/user/list', // 数据接口
where: {
page: pageNum,
size: pageSize
},
cols: [[
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80, sort: true},
{field: 'gender', title: '性别', width: 80}
]]
});
// 监听分页条数切换
laypage.render({
elem: 'pageLimit',
count: 100, // 总条数
limit: pageSize, // 每页条数
curr: pageNum, // 当前页码
jump: function (obj, first) {
if (!first) {
pageNum = obj.curr;
pageSize = obj.limit;
// 重新渲染表格
table.reload('dataTable', {
where: {
page: pageNum,
size: pageSize
},
page: {
curr: pageNum // 设置当前页码
}
});
}
}
});
// 监听分页导航
$(document).on('click', '.layui-laypage-prev, .layui-laypage-next', function () {
var page = $(this).data('page');
if (page > 0 && page <= data.totalPages) {
pageNum = page;
// 重新渲染表格
table.reload('dataTable', {
where: {
page: pageNum,
size: pageSize
},
page: {
curr: pageNum // 设置当前页码
}
});
}
});
});
</script>
</body>
</html>
7. 集成Springboot和LayUI
在Springboot项目中添加LayUI的静态资源路径：
pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
application.yml
spring:
resources:
static-locations: classpath:/static/, classpath:/layui/
8. 测试功能
启动Springboot项目，访问http://localhost:8080/user/list，即可查看数据列表和分页导航。
常见问题解答
1. 如何自定义表格列？
在LayUI页面中的cols属性中，您可以指定表格列的字段、标题、宽度和排序规则。
2. 如何改变每页显示的条数？
在LayUI页面中，使用pageLimit下拉列表选择每页显示的条数，并监听pageLimit事件，更新表格参数并重新渲染表格。
3. 如何禁用分页导航？
在LayUI页面中，将page属性设置为false即可禁用分页导航。
4. 如何添加排序功能？
在LayUI页面中的cols属性中，将sort属性设置为true即可为列添加排序功能。
5. 如何优化数据加载速度？
您可以使用分页功能，将数据分成较小的块加载，减少一次性加载的数据量。还可以使用缓存机制来存储经常访问的数据，减少数据库查询次数。
结语
通过将Springboot与LayUI集成，您可以轻松构建交互式数据列表和分页功能，增强您的Web应用程序的用户体验。本文深入探讨了实现过程，并提供了代码示例和常见问题解答。希望这篇文章对您有所帮助，祝您在开发中取得成功！
