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虚拟机(JVM) 第十章 字节码指令

    一.字节码指令的含义 Java字节码指令由一个字节长度的,代表某种特定操作含义的数字(操作码)以及其后的零至多个代表此操作所需参数(操作数).此外字节码指令是面向操作数栈的,这里操作数栈在功能上对应实 ...

  2. vue 生命周期 笔记

    生命周期:一个组件从创建到销毁的这个过程叫做生命周期 生命周期钩子函数   1.组件从创建到销毁的过程 1.创建前 创建后 2.挂载前 挂载后 3.更新前 更新后 4.销毁前 销毁后 beforeCr ...

  3. ROS(机器人URDF模型优化)

    URDF模型 xacro优化后的URDF模型 1.精简模型代码(创建宏定义,文件包含) 2.提供可编程接口(常量,变量,数学计算,条件语句) 常量定义: name:base_length的值value ...

  4. ElasticSearch关联查找

    ElasticSearch是一个基于Lucene的开源搜索引擎,支持全文检索,提供restful接口.在ES中,提供了类似于MongoDB的面向文档存储服务,这种面向文档的存储非常灵活,但是文档与文档 ...

  5. day1: python3.5学习

    1. 基础知识 变量:用于存储信息,方便后面的调用 常量:python中是没有常量这一概念的,若想定义一个常量,需要将变量名大写 举例:name = "Helen"   #定义一个 ...

  6. allure报告定制(pytest+jenkins)

    环境及安装可查看 pytest+jenkins安装+allure导出报告 要让allure报告更漂亮,更直观,需要在脚本中写入allure特性 一开始allure调用step().story().fe ...

  7. apache 子域名自动与子域名同名的目录绑定

    假设有域名domain.com,已经泛解析子域名*.domain.com到该主机的ip,web根目录为/var/www/,在访问a.domain.com时,能自动绑定/var/www/a/目录,访问b ...

  8. 华南理工大学“三七互娱杯”程序设计竞赛 HRY and codefire(概率期望DP)

    https://ac.nowcoder.com/acm/contest/874/A 题目:有两个账号 , 一开始都为0级 , 求任意一个账号升级到N的期望 要求:如果当前账号嬴了 , 就继续沿用当前的 ...

  9. 解决TeamViewer无法按给定网络地址联系伙伴

    说明:这种现象一般是断网后DNS改变了,或者路由重启了没有重启网络配合导致的. 解决方法: 1.Windows: ipconfig /flushdns 2.Linux: /etc/rc.d/init. ...

  10. mvvm小论(暂记)

    广州-PC26(34627) 2:09:44 在android 线程最后用 handler = new Handler();            updateThread = new Runnabl ...