springboot+Thymeleaf+layui 实现分页
layui分页插件
引入相关的js和css
layui:css <link rel="stylesheet" th:href="@{layui/css/layui.css}">
layui:js <script th:src="@{layui/layui.js}"></script>
jquery <script th:src="@{js/jquery.min.js}"></script>
th:src="@{xxx}" 这个对应的文件路径 当然采用cdn 直接导入链接也可以直接按照html格式去写
CDN 方式
<!-- 引入 layui.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.5/css/layui.min.css">
<!-- 引入 layui.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.5/layui.min.js">
<!-- 引入 jquery.js -->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
引入分页插件
<script th:inline="JavaScript">
layui.use('laypage', function () {
var laypage = layui.laypage;
laypage.render({
elem: 'userpage', //任意一个div 的ID,但不用加 # 号 将分页添加到该div下面
count: [[${session.gzcount}]], //数据总数,后台获取
limit: 5, //每页条数
curr: [[${session.pages}]], //当前页数
layout: ['prev', 'page', 'next', 'skip'], //这里就是一些功能按钮 详情可以阅读 layui的官方文档
jump: function (obj, first) {
//这里是首次不执行,以为当我们异步请求后 需要重新加载该页面获取新的数据 如果直接写在外面 会循环调用 导致页面一直重复加载
if (!first) {
$.ajax({
type: "POST",
url: "/user/gzpages", //接口路径
data: {"pages":obj.curr, //obj.curr得到当前页,以便向服务端请求对应页的数据。
"limit":obj.limit,//obj.limit得到每页显示的条数
},
success: function(data) {
location.reload() //重新加载页面 当然这里可以进行判断 如果后台数据没有改动 可以不用重新加载
},
});
}
}
});
});
</script>
Controller
直接上代码了,
@RequestMapping("/user/gomygz")
public String mygz(HttpServletRequest request,Model model){
String gzpages =(String) request.getSession().getAttribute("gzpages");
Map finduserfansmap = userService.finduserfansmap(request, gzpages);
/**这个是一个封装参数的方法可以封装到service中 也可以直接放在controller 当然最好封装到Service中
public Map finduserfansmap(HttpServletRequest request, String pages){
String limit =(String) request.getSession().getAttribute("limit");
String pages=(String) request.getSession().getAttribute("pages");
Map map=new HashMap();
int pages1=1,limit1=5; //初始化参数 (当前页 和每页条数)
if (pages!=null&&limit!=null){ //第一次进入页面 session pages limit 是空的 我们就直接用最初的值 当异步请求创建了session 后我们就用 session的值
pages1 = Integer.valueOf(pages);
limit1 = Integer.valueOf(limit);
}
map.put("start",pages1*limit1-limit1);
map.put("end",pages1*limit1);
return map;
}
**/
List<Fansmsg> relations = userService.findto_userid(finduserfansmap);
request.getSession().setAttribute("mygz",relations);
return "user/mygz";
}
//切换页码的请求
@RequestMapping("/user/gzpages")
@ResponseBody
public int gzpages(String pages,String limit,HttpServletRequest request){
//将参数封装到session里面 每次请求都会更新session的值
request.getSession().setAttribute("pages",pages);
request.getSession().setAttribute("limit",limit);
return 1;
}
Mapper
就是一个简单的SQL语句
<select id="xxx" parameterType="map" resultType="pojo">
select * from table where 查询条件 limit #{start},#{end}
</select>
这样就可以实现了
当然用vue 可以双向绑定 前后端分离 后端只负责提供各种json数据 前端用vue 遍历数据 就比这简单多了
springboot+Thymeleaf+layui 实现分页的更多相关文章
- Springboot+Thymeleaf+layui框架的配置与使用
前言Springboot默认是不支持JSP的,默认使用thymeleaf模板引擎.所以这里介绍一下Springboot使用Thymeleaf的实例以及遇到的问题. 配置与使用1.在applicatio ...
- springboot+thymeleaf+pageHelper带条件分页查询
html层 <div> <a class="num"><b th:text="'共 '+ ${result.resultMap['pages ...
- java+springBoot+Thymeleaf+vue分页组件的定义
导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...
- layui表格数据渲染SpringBoot+Thymeleaf返回的数据时报错(Caused by: org.attoparser.ParseException: Could not parse as expression: ")
layui table渲染数据时报错(Caused by: org.attoparser.ParseException: Could not parse as expression: ") ...
- Thymeleaf前后端分页查询
分页查询是一个很常见的功能,对于分页也有很多封装好的轮子供我们使用. 比如使用mybatis做后端分页可以用Pagehelper这个插件,如果使用SpringDataJPA更方便,直接就内置的分页查询 ...
- 权限管理系统之SpringBoot集成LayUI实现后台管理首页
万事开头难,昨天一直在构思用户权限管理系统怎么实现,实现哪些需求,采用什么技术等,也在网上百度了好多,计划使用SpringBoot + Mybatis + thymeleaf + LayUI + S ...
- LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页
LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...
- org.springframework.expression.spel.SpelEvaluationException: EL1004E: Method call: Method service() cannot be found on com.my.blog.springboot.thymeleaf.util.MethodTest type
前言 本文中提到的解决方案,源码地址在:springboot-thymeleaf,希望可以帮你解决问题. 至于为什么已经写了一篇文章thymeleaf模板引擎调用java类中的方法,又多此一举的单独整 ...
- SpringBoot+Mybatis配置Pagehelper分页插件实现自动分页
SpringBoot+Mybatis配置Pagehelper分页插件实现自动分页 **SpringBoot+Mybatis使用Pagehelper分页插件自动分页,非常好用,不用在自己去计算和组装了. ...
随机推荐
- SSM-员工管理项目实战-CRUD-增删改查
SSM-CRUD 一.项目简介 主界面演示 功能点 分页 数据校验 ajax Rest 风格的 URI 技术点 基础框架 - ssm(Spring + SpringMVC + MyBatis) 数据库 ...
- Android Studio之圆形按钮设计
•效果展示图 •实现方法 点击 app/src/main/res 找到 drawable 文件夹,右击->New->Drawable Resource File. 创建一个 $drawab ...
- 互联网开发工具之idea项目打jar包
一.idea打jar包 步骤一:创建一个简单的java项目:如下图所示 `public class Main { public static void main(String[] args) { Sy ...
- java正则匹配${xxx} 排除单引号双引号内的内容,前提引号必须成对出现
public static void main(String[] a) { String wpp = "select 1, ${mark} '``this is, `/message22` ...
- 【ProLog - 3.0 进阶:递归】
[ProLog中的递归] 如果递归中的一个或多个规则引用谓词本身,则对该谓词使用"递归"定义 在使用时,这往往像一条食物链或者族谱的构成(A的爸爸的爸爸,即A的爷爷,是A的长辈) ...
- lustre文件系统环境搭建及测试
目录 1.节点角色 2.硬件配置 3.软件版本 4.安装软件包 4.1.安装 e2fsprogs 相关包 4.2.安装 kernel 相关包 4.3.客户端安装 4.4.服务器端安装 4.5.配置 5 ...
- inline®ister
inline关键字: 内联只是一个请求,不代表编译器会响应:同时某些编译器会将一些函数优化成为内联函数. C++在类内定义的函数默认是内联函数,具体是否真变成内联函数还需看编译器本身. registe ...
- Django中 render() 函数的使用方法
render() 函数 在讲 render() 函数之前,我们在 Django 项目 index 文件夹的 urls.py 和 views.py 中编写如下功能代码:(不难,望读者细心阅之) # in ...
- RedHat 7.6 安装 Mysql 8.0.17
# 查看是否安装mysql rpm -qa | grep -i mysql # 如果有,需要卸载旧版本Mysql及相关依赖包 rpm -e MySQL-client-*** # 查看开机启动服务列表状 ...
- JAVAEE_Servlet_09_Adapter适配器GenericServlet
适配器 GenericServlet * 适配器 (Adapter) - 适配器的作用? 1.我们目前所有的Servlet类都直接实现了javax.servlet.Servlet接口,但是该接口中有些 ...