脚本内容
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>
