layui的分页
layui的分页需要后台配合,这边我使用的是pagehelper
@RequestMapping("findGoods")
private String findGoods(Integer cateId, String goodsName,Integer pageNum,Integer pageSize) {
JSONObject json = new JSONObject();
PageHelper.startPage(pageNum,pageSize);
List<Goods> goods;
if (cateId == null && StringUtils.isBlank(goodsName)) {
goods = goodsService.findGoods();
} else {
goods = goodsService.findGoods(cateId, goodsName);
}
PageInfo<Goods> personPageInfo = new PageInfo<>(goods);
json.put("code",0);
json.put("msg","");
json.put("count",personPageInfo.getTotal());
json.put("data",personPageInfo.getList());
return json.toString();
}
pageHelper 使用原理不在此赘述了,但是注意一点就是PageHelper.startPage(pageNum,pageSize);,这句代码要写在执行查询操作之前
layui本身会在table请求传递page 和Limite,但是如此一来我们在点击下一页是page 和limit还会是1和10 所以需要手动设置,而且后台需要返回必须返回count值,用来计算总条数
table.render({
elem: '#goods-table',
url: "/Goods/findGoods?cateId=" + cateId + "&goodsName=" + name+"&pageNum="+pageNum+"&pageSize="+pageSize,
cellMinWidth: 80,
toolbar: '#barTop',
cols: [[
{type: 'checkbox', fixed: 'left'},
{field: 'goId', title: 'ID', sort: true, align: 'center'},
{field: 'goodsId', title: '产品编码', sort: true, align: 'center'},
{field: 'modelnum', title: '产品型号', align: 'center'},
{field: 'goodsName', title: '产品名称', align: 'center'},
{field: 'categoryName', title: '分类名称', align: 'center'},
{field: 'price', title: '展示价格', sort: true, align: 'center'},
{
field: 'isDefault', title: '是否默认', sort: true, align: 'center', templet: function (d) {
return d.isDefault == 0 ? "否" : "是";
}
},
{fixed: 'right', title: "操作", align: 'center', toolbar: '#curd'}
]],
done: function (res) {
laypage.render({
elem: 'goods-page',
count: res['count'],
curr:pageNum,
limit: pageSize,
layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
jump: function (obj, first) {
if (first) {
return;
}
initTable(obj.curr, obj.limit,cateId,name);
}
});
},
});
按照上面即可完成分页
layui的分页的更多相关文章
- LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页
LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...
- 项目总结17-使用layui table分页表格
项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...
- Layui Table 分页记忆选中
Layui Table 分页记忆选中 挺好的功能,之前为什么放弃了,哈哈哈! 在最早的版本中,layui 的 table 会记录每页的勾选状态,但很多用户反馈这是 bug,因为当他们获取选中数据时,其 ...
- layui table 分页 序号始终从”1“开始解决方法
在用Layui table 分页显示数据,用 type:"numbers" 进行显示序号有以下的问题 1.表格自带的分页,page:true 这种分页,在切换页面的时候序号可以正常 ...
- MUI 结合layui实现分页
mui自带有分页,在ui上我还是认为layui的友好点. 第三方插件: template-web.js-----------------前端数据绑定 layui.js.layui.css------- ...
- Spring Boot mybatis HashMap +layui 通用分页
背景: mybatis 常用数据查询的方法都是先建实体类,再建Mapper,最后写Service,如果只是单纯的去查询数据显示,这样操作太麻烦.本文就以mybatis +layui创建通用分页类,简化 ...
- layui实现分页
一 准备工作 首先必须先引入layui的完整目录,也就是你下载下来的整个layui的目录都要放在你的资源文件夹下,也就是这个文件目录 刚开始接触layui的时候,以为和jquery,vue等框架一样, ...
- tp5+layui实现分页
layui和thinkphp5自己在百度上下载 html代码 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- layui的分页使用(前端分页)
<div id="one"></div>//显示数据库中数据的<ul id="ones"></ul>//显示分页 ...
随机推荐
- 【12c OCP】最新CUUG OCP-071考试题库(51题)
------------------------------------------------------- 51.(12-10)choose the best answer: Evaluate t ...
- 【timeisprecious】【JavaScript 】JavaScript String 对象
JavaScript>String 对象 1 .From Runnob JavaScript String 对象(概览) JavaScript String 对象(教程)
- CodeChef April Challenge 2019题解
传送门 \(Maximum\ Remaining\) 对于两个数\(a,b\),如果\(a=b\)没贡献,所以不妨假设\(a<b\),有\(a\%b=a\),而\(b\%a<a\).综上, ...
- 洛谷P4250 [SCOI2015]小凸想跑步(半平面交)
题面 传送门 题解 设\(p\)点坐标为\(x_p,y_p\),那么根据叉积可以算出它与\((i,i+1)\)构成的三角形的面积 为了保证\(p\)与\((0,1)\)构成的面积最小,就相当于它比其它 ...
- 64位虚拟机中安装CentOS_6.7
虚拟机VirtualBox-4.3.24-98716-Win.1425444683.exe,操作系统选用CentOS-6.7-x86_64-LiveDVD .iso. 1) 启动VirtualBox, ...
- npm 查看express版本
npm list 名称 eg: npm list express
- mxonline实战12, 课程评论,相关课程推荐,课程视频页
对应github地址:第12天 一. 课程评论 1. 创建URL, VIEW courses/views.py -> Course
- Win10将用户名修改为英文
前言 最近重装了一次Win10系统,手贱地在引导里设置了中文的用户名.使用微软账户进行登录后,Win10以这个中文名建立了用户的文件夹,使得少数软件安装或使用过程中,保存路径不支持中文路径,从而报错, ...
- @ModelAttribute注解和POJO传参过程
1.@ModelAttribute注解 @ModelAttribute主要有三个用途,对方法进行注解,对参数进行注解,还有@ModelAttribute和@RequestMapping一起对方法进行注 ...
- whdxlib
1 数据库系统实现 实 验 指 导 书 齐心 彭彬 计算机工程与软件实验中心 2016 年 3 月2目 录实验一.JDBC 应用程序设计(2 学时) ......................... ...