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的分页的更多相关文章

  1. LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...

  2. 项目总结17-使用layui table分页表格

    项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...

  3. Layui Table 分页记忆选中

    Layui Table 分页记忆选中 挺好的功能,之前为什么放弃了,哈哈哈! 在最早的版本中,layui 的 table 会记录每页的勾选状态,但很多用户反馈这是 bug,因为当他们获取选中数据时,其 ...

  4. layui table 分页 序号始终从”1“开始解决方法

    在用Layui table 分页显示数据,用 type:"numbers" 进行显示序号有以下的问题 1.表格自带的分页,page:true 这种分页,在切换页面的时候序号可以正常 ...

  5. MUI 结合layui实现分页

    mui自带有分页,在ui上我还是认为layui的友好点. 第三方插件: template-web.js-----------------前端数据绑定 layui.js.layui.css------- ...

  6. Spring Boot mybatis HashMap +layui 通用分页

    背景: mybatis 常用数据查询的方法都是先建实体类,再建Mapper,最后写Service,如果只是单纯的去查询数据显示,这样操作太麻烦.本文就以mybatis +layui创建通用分页类,简化 ...

  7. layui实现分页

    一 准备工作 首先必须先引入layui的完整目录,也就是你下载下来的整个layui的目录都要放在你的资源文件夹下,也就是这个文件目录 刚开始接触layui的时候,以为和jquery,vue等框架一样, ...

  8. tp5+layui实现分页

    layui和thinkphp5自己在百度上下载 html代码 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  9. layui的分页使用(前端分页)

    <div id="one"></div>//显示数据库中数据的<ul id="ones"></ul>//显示分页 ...

随机推荐

  1. 使用java中for循环,循环打印出五角星--

    //5.0 输出五角星        int touHigh = 6;        int jianHigh = 25 ;        int kuang =50;        for (int ...

  2. ORM的查询操作

    查询的分类 class Author(models.Model): name = models.CharField(max_length=32) age = models.IntegerField() ...

  3. 50余本中外Python电子教程及源码下载地址

    链接:http://pan.baidu.com/s/1c0VTwsC 密码:hapu

  4. 为什么在AI领域网络安全更重要?先睹为快~

    AI迎来了改变世界的新机遇,同时也迎来了新的网络安全问题,只要是联网的系统就会有漏洞爆出~ 随着大数据的应用,人工智能逐渐走入千家万户并显示出巨大的市场空间,从机器人客服.自动驾驶汽车到无人机等,全都 ...

  5. Vmware下Kali设置桥接网络无法上网

    1.检查是否设置桥接 2.编辑>首选项>虚拟网络编辑器>选对本机上网的网卡 3.检查上网的网卡>适配器属性栏有没有 Vmware Bridge Protocol 桥接的服务. ...

  6. mysql 多实例

    linux系统下,先用mysql用户帐号的身份建立数据表:/usr/local/webserver/mysql/bin/mysql_install_db --basedir=/usr/local/we ...

  7. vim中常用的命令

    1.光标的命令 gg 移到第一行位置 G 移到最后一行 o       行首 $       行末 nk 向上移动n行 nj 向下移动n行 nh 向左移动n列 nl 向右移动n列 ctrl+f     ...

  8. ui2-3

    2016.9讲义 一.课程的主要内容和目的 二.课程所用工具软件——Photoshop CS6 1. Photoshop 的发展史 1990.2,ps1.0问世,1991.2,PS2.0发行,此后,进 ...

  9. 最新版chrome浏览器如何离线安装crx插件?(转载)

    原文链接:https://newsn.net/say/chrome-crx-offline.html mac新版chrome开启离线插件安装 对于mac新版chrome,注意,大家一定要按照顺序来.m ...

  10. WebGIS简单实现一个区域炫酷的3D立体地图效果

    1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...