本人初学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); }