【Layui】使用table和laypage组件实现动态显示列和分页

脚本内容

layui.use(['table', 'laypage'], function () {var table = layui.table;var laypage = layui.laypage;var page = 1;//页码全局变量var limit = 20;//分页大小全局变量table.render({elem: '#test'//容器ID, url: ''//数据获取接口地址, where: {page: page}//接口参数，page为分页参数, height: 'full-85', limit: limit //每页默认显示的数量, cols: [], id: 'testReload', done: function (res, curr, count) {//在完成接口调用后进行操作var mycars;//列参数，用于在获取到数据后通过数据动态生成需要显示的列//在这进行对mycars的处理table.init('demo', {//转换成静态表格cols: [mycars]//将处理后的mycars传入cols, data: res.data//设置静态表格数据, limit: 20//设置静态表格页面数据条数（分页大小）, count: res.count//设置静态表格总数据条数});
//在获取到表格数据后加载分页组件，点击分页时调用table的reload方法重新加载表格数据达到分页效果laypage.render({elem: 'laypage'//分页容器ID, count: res.count//设置分页数据总数, curr: page//当前页码, limit: limit//分页大小, layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'], jump: function (obj, first) {//跳转方法if (!first) {//若不为第一页page = obj.curr;//设置全局变量page 为当前选择页码limit = obj.limit;//设置全局变量limit 为当前选择分页大小table.reload('testReload', {//重新加载表格where: { //接口参数，page为分页参数page: page}});}}})}});});

HTML内容

<!--表格容器-->
<table class="ui-usertable" id="test" lay-filter="demo"></table>
<!--分页容器--><div id="laypage"></div>

【Layui】使用table和laypage组件实现动态显示列和分页相关推荐

Layui框架table组件使用
记录.总结Layui的form.table组件使用. 一.增删改查要完成的页面样式为: 使用的是Layui中form.table组件. HTML <html><head>&l ...
基于layui中table组件的数据表格单元格合并
layui.use(['table'], function () {var $ = layui.$, table = layui.table;var mergeColumns=['province', ...
layui表头样式_js相关：layui中table表头样式修改方法
js相关:layui中table表头样式修改方法发布于 2020-7-25| 复制链接分享一篇关于layui中table表头样式修改方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看 ...
layui 给table里面的添加图标_layui中的table中toolbar自定义过程
自己挖过的坑需要自己来填. layui的table默认表头工具栏右边有3个操作,分别是过滤字段.导出excel.打印功能. 在js中代码添加toolbar即可实现上面的效果: table.render ...
html中的异步请求数据格式,解决layui中table异步数据请求不支持自定义返回数据格式的问题...
使用版本 layui-v2.3.0 修改: 打开layui中table.js源码在 Class.prototype.pullData 这个方法定义内部 //获得数据 Class.prototype. ...
layui 改写 table 排序,填加中文按照拼音排序
因为layui table默认的排序不支持中文拼音,改写layui源码来完成我们的需求注意在layui官网下载到的layui代码是压缩后的,这里需要下载layui的源码 layui源码地址: 码云地 ...
VUE layui之table数据表格使用详细说明
步骤: 一:layui官网下载包二:将解压的文件放入static文件夹(如果没有就在根目录下新建一个) 三:public文件下index.html中引入css及js文件 <!-- 引入 lay ...
layui框架中用laypage与后端搭配使用做分页列表
layui框架中用laypage与后端搭配使用做分页列表 layui中文离线文档,包含html文档及layui源码首先我们需要在layui.use中引入laypage: layui.use(['la ...
layui 自定义排序_浅谈layui中table的sort排序
table模块是layui框架最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作,本文介绍了layui中table的sort排序,解决了在我们使用sort排序时可能遇到的一些问题. 今天来谈 ...

【Layui】使用table和laypage组件实现动态显示列和分页

【Layui】使用table和laypage组件实现动态显示列和分页相关推荐

最新文章

热门文章