从后台一次性获取所有数据赋值给 Layui table 组件的 data 属性，若数据量大时，很可能会超出浏览器字符串最大长度，导致渲染数据失败。Layui table 结合 laypage 组件实现动态分页可解决此问题。
HTML增加分页组件标签
在table后增加一个用于绑定 laypage 分页组件的div容器标签：<div id="pagebar"></div>。
<div class="layui-block" style="width:100%"><table id="dataList2" lay-filter="dataList2"></table>
</div><div id="pagebar"></div>后台分页处理
后台查询方法需要增加两个参数：page(当前页码)、pageSize(每页大小)。
在循环外增加一个变量 totalCount ，用于保存符合条件的数据总记录数。
输出数据之前判断页数，跳出。
//分页处理
s totalCount=totalCount+1
continue:(totalCount<((page-1)*pageSize+1))||(totalCount>(page*pageSize))JS前端分页处理
Layui table渲染之前，预先存储一些分页初始化参数。
//会话存储一些信息
sessionStorage.setItem("layPageCurr",1); //当前页
sessionStorage.setItem("layPageCounts",0); //总记录数
sessionStorage.setItem("layPageSize",17); //页面大小在Layui table的 done 回调方法中，动态渲染 laypage 分页组件。
done: function(data, curr){//动态渲染laypage分页组件layui.laypage.render({elem: 'pagebar', limit: sessionStorage.getItem("layPageSize"), //动态赋值页面大小limits: [17,25,50,100,1000],curr: sessionStorage.getItem("layPageCurr"), //动态赋值当前页count: sessionStorage.getItem("layPageCounts"), // 数据总数layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局jump: function(obj, first){//console.log(obj);if (first) { return; } //首次不执行，重要！var page=obj.curr; //当前页var pageSize=obj.limit; //页面大小sessionStorage.setItem("layPageSize",pageSize); //如果切换了分页大小，重新存储页面大小find(page, pageSize);}});
}在调用后台查询方法完成后的回调方法中，存储当前页和记录总数。
sessionStorage.setItem("layPageCurr",page);
sessionStorage.setItem("layPageCounts",dataObj.counts);
效果
