layui框架中用laypage与后端搭配使用做分页列表

layui中文离线文档，包含html文档及layui源码

首先我们需要在layui.use中引入laypage:

layui.use(['laypage'],function(){laypage=layui.laypage;
})

然后在table.render写上下面这段代码:
prev,next是自定义的,obj.curr指的是当前页码,count是总条数，由后端返回，page是前端传的要查询的数据的页码;

done: function (e) {laypage.render({elem: 'page', //注意，这里的 page 是 ID，不用加 # 号count: e.count, //数据总数，从服务端得到curr: page,limit: size, // 每页条数prev: "<<",next: ">>",theme: "#0099ff",layout: ['count', 'prev', 'page', 'next'],skip: true,jump(obj, first) {if (!first) {reloadTable(obj.curr, 10);//查询当页数据}}});},

可根据自身的需求进行调整

完整代码如下：

layui.use(['layer','laypage','form'],function(){function reloadTable(page, size) {$.ajax({url: '后端接口+ '/' + page + '/' + size,dataType: "json",success: function (res) {table.render({elem: '#currentTableId',data: res.data,cols: [[]],done: function (e) {console.log("分页---", e);laypage.render({elem: 'page', //注意，这里的 page 是 ID，不用加 # 号count: e.count, //数据总数，从服务端得到curr: page,limit: size, // 每页条数prev: "<<",next: ">>",theme: "#0099ff",layout: ['count', 'prev', 'page', 'next'],skip: true,jump(obj, first) {if (!first) {reloadTable(obj.curr, 10);//查询当页数据}}});},page: false,});form.render();}})}})

layui框架中用laypage与后端搭配使用做分页列表相关推荐

Layui框架form模块的表单验证
在layui框架里边针对于表单元素做了比较多的功能,下面将介绍的功能就是form模块里面自00带的表单验证功能,该功能可以在提交表单时自动验证表单. 首先要使用form模块时需要加载模块,这是所有模块 ...
layUI框架中文件上传前后端交互及遇到的相关问题
下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...
php后端必学layui框架速搭网站后台
对于大部分后端来说,前端都是易如反掌了. 尤其是在中小型项目中,是网站后台,如果给前端做费时费力,数据对接等错乱复杂.而layui就是专门给后端解决这些问题的,而且layui框架不需要将你的时间 ...
php layui 框架,快速上手前端框架layui
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 一.介绍在使用layui之前,我们先要了解一下la ...
前端学习之LayUi框架基础
今天笔者学习了LayUi框架的一些基础内容,总体来说,LayUi框架比BootStrap框架更倾向于后台的搭建和使用,样式更加多样,说明也对国人更加友好,毕竟是国人开发的框架嘛~废话不多少,开始介绍. ...
layui table reload post请求_如何实现在Layui框架中完成父窗口刷新（更新）
最近有个项目使用Layui框架进行后端系统的界面搭建,其中Layui框架中的Layer组件在项目中会用得非常多.且有些功能会遇到子窗口完成数据的提交后,进行关闭同时会刷新父窗口的数据,所以此文章分享一 ...
layui框架使用总结
最近一个后台系统使用layui框架做的,遇到好多坑在这里总结一下. 1.layui的基本使用,下面的在他下面写,其他的事件也要在这个里面写行内onclick事件是监听不到写在下面这种代码中的 ...
在Layui框架里设计一个评论列表的前端界面
在Layui框架里设计一个评论列表的前端界面本想找个模板随便写个评论界面,结果找了大半天,木有找到,只能自己动手丰衣足食了.可以点击删除,点击加载更多也能拼接获取更多内容,只是写了个大概模拟逻辑的功 ...
SpringBoot+LayUI+MybatisPlus+Echarts图表前后端分离实现数据统计功能
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java快一年时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 首先给各位粉丝朋友 ...

layui框架中用laypage与后端搭配使用做分页列表

layui框架中用laypage与后端搭配使用做分页列表

layui框架中用laypage与后端搭配使用做分页列表相关推荐

最新文章

热门文章