springboot实现layui分页前后端数据动态交互功能
最近在学layui这个前端框架的分页功能，官⽅的⽂档中，给出的分页样式如下图所⽰:
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>layPage快速使⽤</title>
6<!--注意：这⾥引⼊的样式路径是你本地对应的路径-->
7<link rel="stylesheet" href="layui/css/layui.css" media="all">
8</head>
9<body>
10
11<div id="test1"></div>
12<!--注意：这⾥引⼊的样式路径是你本地对应的路径-->
13<script src="layui/layui.js"></script>
14<script>
15 layui.use('laypage', function(){
16var laypage = layui.laypage;
17
18//执⾏⼀个laypage实例
19 der({
20 elem: 'test1' //注意，这⾥的 test1 是 ID，不⽤加 # 号
21 ,count: 50 //数据总数，从服务端得到
22 });
23 });
24</script>
25</body>
26</html>
执⾏后得到的效果如下图所⽰：
作为后端的java开发，有时候需要⽤到这个分页的功能，所以想着来结合layui分页做⼀个前后端数据交互分页。
1、准备⼀下数据库所需要的数据，⼀共两百条，是从layui上⾯拿到的json⽂件，然后在数据库中建⽴对应字段，然后读取该json数据到数据库中（或者你⾃⼰定义⼀些数据也是可以的），如下是数据库中的数据：
2、搭建springboot后端环境，⾸先使⽤idea新建⼀个springboot项⽬，在创建好的项⽬的template⽂件夹下新建⼀个名为：pagesTest.html⽂件夹
注意：在template⽂件夹下的⽂件不能直接通过浏览器访问，必须通过转发，然后视图解释器进⾏解释才能访问得到。如果想要直接访问的话，可以将要访问的⽂件放到static⽂件夹下
pagesTest.html的代码如下所⽰：
1<!DOCTYPE html>
2<html lang="en" xmlns:th="">
3<head>
4<meta charset="UTF-8">
5<title>layui分页测试</title>
6<!--这⾥要注意，如果放在templates⽬录下，那么引⽤的路径需要改⼀下的，相对路径（以当前⽂件的位置出发）是可以访问到静态资源的-->
7<!-- <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css"/>
8 <script src="../static/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
9 <script src="../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>-->
10<!--直接从static⽂件夹路径开始，因为springboot的静态资源路径中有static⽂件夹，推荐使⽤这种⽅法。加了/代表使⽤相对路径，不加斜杠代表使⽤绝对路径-->
11<!--<link rel="stylesheet" type="text/css" href=/layui/css/layui.css"/>
12 <script src="/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
13 <script src="/layui/layui.js" type="text/javascript" charset="utf-8"></script>-->
14<!--路径测试，使⽤th:src的路径，推荐使⽤这种，不⽤写static⽂件夹前缀，因为springboot已经默认指定好了-->
15<link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}"/>
16<script th:src="@{/js/jquery-3.6.0.js}" type="text/javascript" charset="utf-8"></script>
17<script th:src="@{/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
18
19
20
21<!--这⾥设置了⼀下以绝对路径进⾏访问url-->
22<base href="localhost:8081/"/>
23</head>
24<body>
25<script>
26 $(function () {
27//第⼀次，需要⼿动调⽤⼀下这个函数
28 pages(1, 10);
29 })
30
31function pages(pages, limit) {
32// 发起异步请求
33 $.ajax({
34 url: "pagesTest",
35 data: {
36 "pages": pages,
37 "limit": limit
38 },
39 dataType: "json",
40 success: function (data) {
41var html = "";
42 $.each(data.users, function (index, user) {
43 html += "<tr>";
44 html += "<td>" + user.id + "</td>";
45 html += "<td>" + user.username + "</td>";
46 html += "<td>" + user.sex + "</td>";
47 html += "<td>" + user.city + "</td>";
48 html += "<td>" + user.sign + "</td>";
49 html += "<td>" + perience + "</td>";
50 html += "<td>" + user.logins + "</td>";
51 html += "<td>" + user.wealth + "</td>";
52 html += "<td>" + user.classify + "</td>";
53 html += "<td>" + user.score + "</td>";
54 html += "</tr>";
55 });
56// 将拼接好的内容放到表格体内，每次拼接的时候都需要清除⼀下之前的数据，否则就会越来越多了，但是发现去掉其实也是可以的，应该是layui在拼接内容的时候帮我们把之间的内容去掉了
57// 了
58 $("#tbody").html(html);
59//后台需要传递总页数、当前页、⼀页显⽰多少条记录数给回调函数
60 laypage(data.userTotal, data.curr, data.limit);
61
62
63 }
64
65
66 });
68//这⾥直接在jquery的函数⾥⾯引⽤，因此不⽤加：th:inline="none"也是可以的
69function laypage(total, page, limit) {
70//分页回调函数，当每次点击分页组件的时候就会触发这个回调函数执⾏
71 layui.use(['laypage','layer'], function () {
72var laypage = layui.laypage,layer = layui.layer;
73 der({
74 elem: 'pages',//elem属性绑定的是容器的ID属性值，不需要加#
75 count: total,//记录数的总数量
76 curr: page || 1,//当前页是⼏，如果是第⼀次，则为1（因为第⼀次加载，page的值是没有嘛，所以就选择1），不过这个1写不写都⽆所谓，反正默认值是1了。这个值必须要有的，不然页码永远都是选中第⼀页
77 limit: limit || 10,//每次分的页数，默认值也是10条。这个值也要传的，因为切换每页显⽰的条数的时候需要⽤它来记录⼀下，否则永远都是10条展⽰
78 limits:[5,10,20,30],//每页显⽰的条数
79 layout:['prev','page','next','limit','skip','count'],//⾃定义布局:⾃定义排版。可选值有：count（总条⽬输区域）、prev（上⼀页区域）、page（分页区域）、next（下⼀页区域）、limit（条⽬选项区域）、refresh（页⾯刷新区域。注意：la
80 groups:5,//连续出现的页码的个数
81 jump: function (obj, first) {
82
83//判断是否是第⼀次加载，如果不是，才执⾏下⾯的函数回调
84if (!first) {
85//layer.msg("我被调⽤了，哈哈哈！");
86//alert(obj.curr);
87 pages(obj.curr, obj.limit);
88 }
89 }
90
91 })
92 })
93 }
94
95
96</script>
97
98<div align="center">
99<table class="layui-table" lay-even lay-skin="line row" lay-size="lg">
100<thead>
101<tr>
102<th>ID</th>
103<th>⽤户名</th>
104<th>性别</th>
105<th>城市</th>
106<th>签名</th>
107<th>积分</th>
108<th>评分</th>
109<th>职业</th>
110<th>财富</th>
111<th>声望</th>
112</tr>
113</thead>
114<!--表格的体部，需要动态添加数据-->
115<tbody id="tbody">
116</tbody>
117</table>
118<!--页码需要另外给⼀个div展⽰-->
119<div id="pages">
120
121</div>
122</div>
123</body>
124</html>
通过阅读上⾯的代码以及注释可以知道，我写了两个函数，⼀个是发起异步请求的，⼀个是调⽤分页回调函数。这个的逻辑就是：页⾯加载完毕后，pages函数被调⽤，并且当
前页的值为1，每页显⽰的条数为10进⾏请求后台的数据，然后循环，动态拼接到表格体中去。最后调⽤这个分页的⾃定义函数：laypage，赋值对应的参数。由于是第⼀次加载，
所以jump这个函数什么也不⼲。
3、接下来配置springboot的properties⽂件，配置内容如下所⽰：
1 t-path=/
2 #关闭模板引擎的缓存，以达到每次刷新都是最新的页⾯
3 spring.thymeleaf.cache=false
4 #设置模板引擎转发时的路径，默认可以不设置
5 spring.thymeleaf.prefix=classpath:/templates/
6 spring.thymeleaf.suffix=.html
7 #配置数据库驱动
8 spring.datasource.sql.cj.jdbc.Driver
9 spring.datasource.url=jdbc:mysql://localhost:3306/springboot?useUnicode=true&characterEncoding=UTF-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8
10 spring.datasource.username=root
11 spring.datasource.password=666666
12 #配置静态资源访问，这个配置很关键，因为layui的css和js都是属于静态资源，在static⽂件下，配置这个⽤静态资源处理器进⾏处理
13 #Spring Boot的默认静态资源的路径为：
14 #spring.mvc.static-path-pattern=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/
15 #优先级从从⾼到低。所以不⽤配置静态资源路径也⾏，如果放在上⾯对应的⽂件夹中的话
16 #spring.mvc.static-path-pattern=/static/**
4、最后，写下MVC的三层架构，model层：
1package bean;
2
3/**
4 * @作者帅得有内涵的我
5 * @创建⽇期 2021/3/17
6 * @创建时间 14:06
7 * @描述：
8*/
9public class User {
10private String id;
11private String username;
12private String sex;
13private String city;
14private String sign;
15private String experience;
16private String logins;
17private String wealth;
18private String classify;
19private String score;
20
21public User() {
22 }
23
24public String getId() {
25return id;
26 }
27
28public void setId(String id) {
29this.id = id;
30 }
31
32public String getUsername() {
33return username;
35
36public void setUsername(String username) {
37this.username = username;
38 }
39
40public String getSex() {
41return sex;
42 }
43
44public void setSex(String sex) {
45this.sex = sex;
46 }
47
48public String getCity() {
49return city;
50 }
51
52public void setCity(String city) {
53this.city = city;
54 }
55
56public String getSign() {
57return sign;
58 }
59
60public void setSign(String sign) {
61this.sign = sign;
62 }
63
64public String getExperience() {
65return experience;
66 }
67
68public void setExperience(String experience) {
70 }
71
72public String getLogins() {
73return logins;
74 }
75
76public void setLogins(String logins) {
77this.logins = logins;
78 }
79
80public String getWealth() {
jquery框架定义81return wealth;
82 }
83
84public void setWealth(String wealth) {
85this.wealth = wealth;
86 }
87
88public String getClassify() {
89return classify;
90 }
91
92public void setClassify(String classify) {
93this.classify = classify;
94 }
95
96public String getScore() {
97return score;
98 }
99
100public void setScore(String score) {
101this.score = score;
102 }
103
104 @Override
105public String toString() {
106return "User{" +
107 "id='" + id + '\'' +
108 ", username='" + username + '\'' +
109 ", sex='" + sex + '\'' +
110 ", city='" + city + '\'' +
111 ", sign='" + sign + '\'' +
112 ", experience='" + experience + '\'' +
113 ", logins='" + logins + '\'' +
114 ", wealth='" + wealth + '\'' +
115 ", classify='" + classify + '\'' +
116 ", score='" + score + '\'' +
117 '}';
118 }
119 }
service以及实现类层
1public interface UserService {
2 List<User> selectAllUser();
3 }
1 @Service
2public class UserServiceImpl implements UserService {
3 @Autowired
4private UserMapper userMapper;
5
6 @Override
7public List<User> selectAllUser() {
8return userMapper.selectAllUser();
9 }
10 }
Mapper层
1 @Mapper
2public interface UserMapper {
3 List<User> selectAllUser();
4 }
1<?xml version="1.0" encoding="UTF-8" ?>
2<!DOCTYPE mapper
3 PUBLIC "-////DTD Mapper 3.0//EN"
4 "/dtd/mybatis-3-mapper.dtd">
5
6<mapper namespace="Mapper.UserMapper">
7
8<select id="selectAllUser" resultType="bean.User"> 9 select * from user_table
10</select>
12</mapper>
最后是controller层
1package ntroller;
2
3import com.github.pagehelper.PageHelper;
4import com.github.pagehelper.PageInfo;
5import bean.User;
6import service.UserService;
7import org.springframework.beans.factory.annotation.Autowired;
8import org.springframework.stereotype.Controller;
9import org.springframework.web.bind.annotation.RequestMapping;
10import org.springframework.web.bind.annotation.RequestParam;
11import org.springframework.web.bind.annotation.ResponseBody;
12import org.springframework.web.servlet.ModelAndView;
13
14import java.util.HashMap;
15import java.util.List;
16import java.util.Map;
17
18/**
19 * @作者帅得有内涵的我
20 * @创建⽇期 2021/3/17
21 * @创建时间 14:06
22 * @描述：
23*/
24 @Controller
25public class UserController {
26 @Autowired
27private UserService userService;
28 @RequestMapping("/pagesTest")
29 @ResponseBody
30public Map<String,Object> selectAllUer2(@RequestParam(defaultValue = "1")Integer pages, @RequestParam(defaultValue = "10")Integer limit) {
31 PageHelper.startPage(pages, limit);
32 List<User> users = userService.selectAllUser();
33// userPageInfo的⽬的是获取到总的页数
34 PageInfo<User> usersPageInfo = new PageInfo<>(users);
35 Map<String, Object> map = new HashMap<>();
36 map.put("userTotal", Total());
37// 这个也是可以的
38// map.put("data", List());
39 map.put("users", users);
40 map.put("curr", pages);
41 map.put("limit", limit);
42
43return map;
44 }
45
46// 跳转到pagesTest页⾯，其实也可以直接访问这个html页⾯，但是前提是这个页⾯在static⽂件夹下，因为html属于静态⽂件嘛，在配置⽂件中也是配置了在static⽂件夹下的任意⽂件交给静态处理器进⾏处理47// 注意：直接访问静态⽂件的时候，不要忘了加上static这个路径
48 @RequestMapping("/toPages")
49public String topages(){
50// 跳转需要经过解释器进⾏处理，因为在配置⽂件中配置了在templates⽂件夹下进⾏查，所以pagesTest这个⽂件需要放到该⽂件夹下
51return "pagesTest";
52 }
53
54 }
⼀不⼩⼼，忘了介绍pom⽂件的依赖引⼊了。这⾥我使⽤的是PageHelper的插件，另外还有数据库连接、Mybatis依赖等的引⼊，如下图所⽰：
1 <!--MySQL连接驱动-->
2<dependency>
3<groupId>mysql</groupId>
4<artifactId>mysql-connector-java</artifactId>
5</dependency>
6
7<!--Mybatis整合SpringBoot框架的起步依赖-->
8<dependency>
9<groupId&batis.spring.boot</groupId>
10<artifactId>mybatis-spring-boot-starter</artifactId>
11<version>2.0.0</version>
12</dependency>
13
14<!--mybatis:pageHelper分页依赖-->
15<dependency>
16<groupId>com.github.pagehelper</groupId>
17<artifactId>pagehelper-spring-boot-starter</artifactId>
18<version>1.2.10</version>
19</dependency>
另外不要忘了，最重要的是将mapper⽂件夹下的xml⽂件拷贝到classpath路径下，也就是在<build>标签中引⼊：
1<resources>
2<!--mapper⽂件拷贝到classpath路径下-->
3<resource>
4<directory>src/main/java</directory>
5<includes>
6<include>**/*.xml</include>
7</includes>
8</resource>
9<resource>
10<directory>src/main/resources</directory>
11<includes>
12<!--表⽰resources下的任何⼦⽬录的任何⽂件都拷贝到classpath路径下-->
13<include>**/*.*</include>
14</includes>
15<filtering>false</filtering>
16</resource>
17</resources>
最后，还忘了介绍layui的⽂件引⼊了。在layui的官⽹下载压缩⽂件，下载好之后，解压后的⽂件夹如下图所⽰：
然后，在springboot的static⽂件夹下新建⼀个名为layui的⽂件夹（名字可以随意，但是为了见名之意，这⾥取为layui），然后将上⾯所有的⽂件夹拷贝进⼊该⽂件夹中，如下图所⽰：
⾄此，基于layui的前后端动态分页就完成了。可以看下效果：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论