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异常术语

    .检查性异常: 不处理编译不能通过 .非检查性异常:不处理编译可以通过,如果有抛出直接抛到控制台(所有RuntimeException的派生类都是非检查型异常) .非运行时异常: 就是检查性异常4.运 ...

  2. html中object和embed标签的区别

    ♦object定义一个嵌入的对象.请使用此元素向您的 XHTML 页面添加多媒体.此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码. ♦<object&g ...

  3. PrefixLength的计算

    直接用android4.2.2的源码来说话: \frameworks\base\services\java\com\android\server\NetworkManagementService.ja ...

  4. leetcode-36-有效的数独

    题目描述: 判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一个以 ...

  5. Scala代码开发 metaTable(元表)

    使用Scala语言开发时,自动生成get和set方法 不用写return进行返回, 因为它的最后一行就是返回值 先建立四个层(层层递进) domain 表结构的建立 repository(DAO) 实 ...

  6. 图解http 笔记

    一,了解web以及网络基础 1,使用http协议访问web web页面是由web浏览器根据地址栏中指定的url从web服务器获取文件资源等信息然后显示的页面. 像这种通过发送请求获取服务器资源的web ...

  7. Spring Boot中自动执行sql脚本

    说明:所有的代码基于SpringBoot 2.0.3版本 背景 在应用程序启动后,可以自动执行建库.建表等SQL脚本.下文中以要自动化执行people.sql脚本为例说明,脚本在SpringBoot工 ...

  8. CSS外边距合并&块格式上下文

    前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...

  9. 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面(get&post)

    使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...

  10. 关闭mac自带apache的启动。

    关闭mac自带apache的启动. sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 如果哪天 ...