本文介绍如何在layui2.0中结合table与laypage实现真分页。通过监听窗口高度动态计算每页显示行数，解决固定行数无法适配屏幕的问题。重点解析getData函数逻辑及laypage jump方法中first参数的必要性，防止接口无限调用，并提供完整JS代码参考。
layui动态分页实现思路
前言：近期项目采用layui构建前端界面，鉴于layui内置table组件的分页功能无法依据屏幕尺寸动态调整每页显示行数，经查阅文档后进行了相关修改。
简要说明：
1. 初始方案依据屏幕尺寸计算并加载每页显示的行数。 2. 项目框架较为陈旧，仍在使用sea.js，因此可忽略framework相关逻辑。 3. getUrlParam（）函数用于处理其他页面携带参数跳转的情况，该部分逻辑可忽略。
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return decodeURI(r[2]); return null; //返回参数值
}
4. templet属性用于对后端返回的数据进行格式化，其他属性配置请参考官方文档。 5. laypage组件中的jump方法必须包含!first判断条件，否则会导致接口被无限调用，无法完成初始化过程。
具体JavaScript代码如下：
核心代码与参数解析
function getData(page) {
var rows = Math.floor(($(window).height() - $('.topNav').height()
- $('.content .noBorderB').height()
- $('.content .searchD').height()
- $('.content .commonTb tr:eq(0)').height() - 100) / 30);
rows = rows <= 0 ? 1 : rows;
framework.hideLoading();
var objectIdSearch = getUrlParam("objectId");
if(objectIdSearch==''||objectIdSearch==undefined){
objectIdSearch = $.trim($("#idSearch").val());
}
var pages=1;
var counts=1;
layui.use('table', function(){
var table = layui.table;
var laypage=layui.laypage;
table.render({
elem: '#test'
// , url: {
,url:'/app/client/user/audio/listp'
,method:"get"
,where: {
pageNo : page,
pageSize : rows,
objectId : objectIdSearch ,
userId : $.trim($("#userIdSearch").val()),
userName : $.trim($("#userNameSearch").val()),
objectName : $.trim($("#audioNameSearch").val()),
chapterName : $.trim($("#chapterNameSearch").val()),
createTime : $.trim($("#createTime").val())
}
,response:{
statusName: 'page' //数据状态的字段名称，默认：code
,statusCode: page //成功的状态码，默认：0
,countName: 'records' //数据总数的字段名称，默认：count
,dataName: 'rows' //数据列表的字段名称，默认：data
}
// }
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, cols: [[
{field: 'id', title: 'ID', align: 'center', sort: true,width:80}
, {field: 'audioBook',width:80, align: 'center', title: '有声书ID', templet: function(d){
return d.audioBook.id
}} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
, {field: 'audioBook',width:124, align: 'center', title: '有声书名称', sort: true,templet: function(d){
return d.audioBook.name
}}
, {field: 'objectType',width:80, align: 'center', title: '类型' , templet: function(d){
if(d=='20'){
return "有声书"
}else{
return "课程"
}
}}
, {field: 'chapter',width:80, align: 'center', sort: true,title: '章节ID', templet: function(d){
return d.chapter.id
}}
, {field: 'chapter.title',width:180, title: '章节名称', align: 'center', templet: function(d){
return d.chapter.title
}} //单元格内容水平居中
, {field: 'payTimes',width:120, title: '购买次数', sort: true, align: 'center'} //单元格内容水平居中
, {field: 'createTime',width:180, title: '购买时间', sort: true, align: 'center', templet: function(d){
return longTrans2Date(d.createTime)
}}
, {field: 'userInfo',width:80, title: '用户ID', sort: true, align: 'center', templet: function(d){
return d.userInfo.userId
}}
, {field: 'userInfo',width:160, title: '用户名称', sort: true, align: 'center', templet: function(d){
return d.userInfo.userName
}}
]]
, done: function(res, curr, count){
pages=res.page;
counts=res.records;
//完整功能
laypage.render({
elem: 'demo7'
,count: counts
,curr: pages
,limit:rows
,layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
,jump: function(obj,first){
// getData(obj.curr)
if(!first){
getData(obj.curr)
}
}
});
}
});
})
}
以上为本文全部内容，希望对各位的学习有所帮助，同时也欢迎大家多多支持本站。