layui table 分页功能实现

今天看自己写的用layui table实现的页面效果，内容太多了，突发奇想加个分页，在百度里找了很多种方法，都不好用，可怎么也不想放弃，就一直找啊，尝试啊，无意间发现了一种简单好用的办法，完美的实现了效果！希望看到这篇文章的各位少走些弯路，一起加油！

链接在此：https://www.html.cn/framework/layui/18354.html

全部代码粘贴如下：

 layui.use('table', function () {var table = layui.table;table.render({elem: '#test', url: '../srv/serviceConfirmmation/selectServiceConfirmmationInfoByUserId', where: {companyId: serviceUnit,region: region,sDate: sDate,eDate: eDate,userName: userName}, cols: [[{ field: 'id', title: 'id', hide: true }, { field: 'no', width: '16%', title: '编号' }, { field: 'userName', width: '8%', title: '发起人' }, { field: 'unitName', width: '23%', title: '单位名称' }, {field: 'addDate', width: '15%', title: '发起时间', sort: true,templet: "<div>{{layui.util.toDateString(d.addDate, 'yyyy-MM-dd HH:mm:ss')}}</div>"}, {field: 'sDate', width: '9%', title: '开始时间', sort: true,templet: "<div>{{layui.util.toDateString(d.sDate, 'yyyy-MM-dd')}}</div>"}, {field: 'eDate', width: '9%', title: '结束时间', sort: true,templet: "<div>{{layui.util.toDateString(d.eDate, 'yyyy-MM-dd')}}</div>"}//, {//    field: 'state', width: '8%', title: '单据状态'//}, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: '20%' }]]//加分页功能, page: true, limits: [10, 20, 50]  //一页选择显示3,5或10条数据, limit: 10  //一页显示10条数据, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据var result;console.log(this);console.log(JSON.stringify(res));if (this.page.curr) {result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);}else {result = res.data.slice(0, this.limit);}return {"code": res.code, //解析接口状态"msg": res.msg, //解析提示文本"count": res.count, //解析数据长度"data": result //解析数据列表};}});

layui table 分页功能实现相关推荐

Layui列表分页功能前后台实现（傻瓜式教程）
Layui列表分页功能前后台实现 layui一直备受国内web开发者的喜欢.使用简单,样式也较为好看.本次说一下layui分页的实例,首先先引入layui,那是肯定的. 效果图: 引入一个maven依 ...
layui table 分页序号始终从”1“开始解决方法
layui table 分页序号始终从"1"开始解决方法参考文章: (1)layui table 分页序号始终从"1"开始解决方法 (2)https:// ...
layui table 分页上一页 : 下一页回调
layui table 分页回调上一页 : 下一页回调学习类的文章,因为最近需要用到这个,所以作为学习记录一下回调的参数是 done table.render({elem: '#main',w ...
layui的分页功能
1.首先在layui中布局好数据表格创建一个table实例最简单的方式是,在页面放置一个元素 ,然后通过 table.render() 方法指定该容器,如下所示: 1. <link rel=& ...
php如何使用layui.table分页,layui实现数据表格及分页的方法
一.前端部分 html只需要放一个有id的div就行了,方便js获取渲染区域 js部分需要注意url为异步数据接口,done是渲染完表格之后的回调函数table.render({ elem: '#da ...
layui table 分页记住之前勾选的数据
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
layui Table分页之后查询bug
①在查询提交参数时,添加一个参数 page:1 layui中通过where提交参数 where:{ search:{'USER_NAME':'红烧鱼'},page:1} 注:此方法虽然看似解决了问题, ...
基于Flask实现Layui表格分页功能
分组查询语法 Mysql分页查询和联合查询_Stillboring的博客-CSDN博客 Flask view代码 #获取学生信息 def getStuInfoList():#获取页数pageNum = ...
layui分页功能实现、管理员模块
1,layui table模块自带的分页功能实现前提:js中引入table模块并加载,用table.render()渲染表格 1.1设置table.render()中的page字段为true,开启分 ...

layui table 分页功能实现

layui table 分页功能实现相关推荐

最新文章

热门文章