本人初学layui，大概也就三天不到吧
Layui 的 table 能支持自动分页，只要把查询返回的字段在渲染的时候放到对应的field就行了
效果如下
上边是其他同事写的代码跟页面，然后，感觉挺方便的，照着弄了个类似的，结果，就炸了。。。等了三十多秒才显示出来。
然后看了下后台代码，这居然。。。是全表查询。。。意思就是这个分页实际上算是个假分页，点击下一页也不是重新再查下一页的信息出来，因为他喵的第一次就已经把所有的都加载查出来了。。。我勒个去，难怪炸了，原来直接帮我查了1700多页的数据（被修改后找不到以前的图了）
然后问同事，他说可以用laypage来实行分页。然后我看文档，一遍跟着做
不得不说layui的文档写的很一般，很多说明就一句带过。。。用起来也很恶心，尤其是获取绑定事件id之类的
最后，在各种百度跟测试下，弄除了table+laypage的分页
其实这两个已经算是两个独立的模块了，代码如下
和上边不同的是，需要把page: true去掉，同时，在table加载完后执行done对laypage进行渲染，图片中queryTaskReport()方法是执行我的自定查询数据库方法，传当前页面curr以及每页显示数量limit到后台，同时需要对是否第一次点击进行判断，否则就无限循环的执行queryTaskReport()刷新。其中元素，counts,故名思意，总数，在返回的数据被我取出来手动放到这里，curr，当前页面，需要跟下边的hash联合使用，否则你无论怎么点都是显示为第一页，至于为什么替换（’#!true=’）,因为我在摸索的是否发现hash的值就是hash#!true=2（页数）的形式，至于原理就先不摸索，把需求搞定再说，嘿嘿嘿
最后是执行结果
由于公司代码，只能贴出相对应的部分前端代码，望见谅
function getDataList(departId, userIds, time ,currentPage, pageSize){
$('#content').html("");
$.ajax({
url: '/remoteServlet',
async: true,
data: {
obj: 'taskReportServer',
method: 'getTaskReport',
count: 5,
param1: departId,
param2: userIds,
param3: time,
param4: currentPage,
param5: pageSize
},
type: 'post',
success: function (data) {
console.log(data);
var data = eval('(' + data + ')');
layui.use('table', function() {
var table = layui.table;
var laypage = layui.laypage;
var date1 = [];
var counts = 0;
var page = 0;
if(data.resultData.length>0) {
date1 = data.resultData;
counts = data.count;
page = data.page;
}
table.render({
elem: '#alltasker',
height: '460',
data: date1,
skin: 'skin',
even: 'true',
cols: [[
{field: 'SU01', title: '<span title="姓名">姓名</span>',align:"center",unresize:true, width:"80", fixed:"left", style:"cursor: pointer",event: 'setSign'}
, {field: 'DD1', title: '<span title="1号">1号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD2', title: '<span title="2号">2号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD3', title: '<span title="3号">3号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD4', title: '<span title="4号">4号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD5', title: '<span title="5号">5号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD6', title: '<span title="6号">6号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD7', title: '<span title="7号">7号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD8', title: '<span title="8号">8号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD9', title: '<span title="9号">9号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD10', title: '<span title="10号">10号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD11', title: '<span title="11号">11号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD12', title: '<span title="12号">12号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD13', title: '<span title="13号">13号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD14', title: '<span title="14号">14号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD15', title: '<span title="15号">15号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD16', title: '<span title="16号">16号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD17', title: '<span title="17号">17号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD18', title: '<span title="18号">18号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD19', title: '<span title="19号">19号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD20', title: '<span title="20号">20号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD21', title: '<span title="21号">21号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD22', title: '<span title="22号">22号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD23', title: '<span title="23号">23号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD24', title: '<span title="24号">24号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD25', title: '<span title="25号">25号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD26', title: '<span title="26号">26号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD27', title: '<span title="27号">27号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD28', title: '<span title="28号">28号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD29', title: '<span title="29号">29号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD30', title: '<span title="30号">30号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
, {field: 'DD31', title: '<span title="31号">31号</span>',align:"center",unresize:true, width: "180",style:"cursor: pointer",event: 'setSign'}
]],
done: function(res, curr, count){
$(".layui-table-main tr").each(function (index ,val) {
$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
});
laypage.render({
elem: 'laypage',
count: counts,
limit: 10,
first: "首页",
last: "尾页",
layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip'],
curr: location.hash.replace('#!true=', ''),
hash: true,
jump: function(obj, first){
page1 = obj.curr;
if(!first){
queryTaskReport(obj.curr, obj.limit);
}
}
});
}
});
});
},
error: function (data) {
console.log("查询错误!");
if(data.msg != null || data.msg != "")
alert(data.msg);
}
});
}
function queryTaskReport(currentPage, pageSize) {
if(currentPage == "")
currentPage = 1;
if(pageSize == "")
pageSize == 10;
var departId = $("[name='FN05']").val();
var time = $('#time').val();
var userCode = $('#userCode').val();
getDataList(departId, userCode, time, currentPage, pageSize);
}
版权声明：本文为qq_38333529原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。