Layui table不使用url属性结合laypage组件实现动态分页

从后台一次性获取所有数据赋值给 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 ，用于保存符合条件的数据总记录数，最后赋值给retObj.counts。 

输出数据之前判断页数，跳出。

//分页处理
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);

效果