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>//显示分页 ...
随机推荐
- 使用java中for循环,循环打印出五角星--
//5.0 输出五角星 int touHigh = 6; int jianHigh = 25 ; int kuang =50; for (int ...
- ORM的查询操作
查询的分类 class Author(models.Model): name = models.CharField(max_length=32) age = models.IntegerField() ...
- 50余本中外Python电子教程及源码下载地址
链接:http://pan.baidu.com/s/1c0VTwsC 密码:hapu
- 为什么在AI领域网络安全更重要?先睹为快~
AI迎来了改变世界的新机遇,同时也迎来了新的网络安全问题,只要是联网的系统就会有漏洞爆出~ 随着大数据的应用,人工智能逐渐走入千家万户并显示出巨大的市场空间,从机器人客服.自动驾驶汽车到无人机等,全都 ...
- Vmware下Kali设置桥接网络无法上网
1.检查是否设置桥接 2.编辑>首选项>虚拟网络编辑器>选对本机上网的网卡 3.检查上网的网卡>适配器属性栏有没有 Vmware Bridge Protocol 桥接的服务. ...
- mysql 多实例
linux系统下,先用mysql用户帐号的身份建立数据表:/usr/local/webserver/mysql/bin/mysql_install_db --basedir=/usr/local/we ...
- vim中常用的命令
1.光标的命令 gg 移到第一行位置 G 移到最后一行 o 行首 $ 行末 nk 向上移动n行 nj 向下移动n行 nh 向左移动n列 nl 向右移动n列 ctrl+f ...
- ui2-3
2016.9讲义 一.课程的主要内容和目的 二.课程所用工具软件——Photoshop CS6 1. Photoshop 的发展史 1990.2,ps1.0问世,1991.2,PS2.0发行,此后,进 ...
- 最新版chrome浏览器如何离线安装crx插件?(转载)
原文链接:https://newsn.net/say/chrome-crx-offline.html mac新版chrome开启离线插件安装 对于mac新版chrome,注意,大家一定要按照顺序来.m ...
- WebGIS简单实现一个区域炫酷的3D立体地图效果
1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...