layui2.0使用table+laypage实现真分页
前言：最近项目上使用layui做前端页面，发现layui的table本身的分页不能根据屏幕生成每页行数，所以研究了下文档，更改分页
简单解释：
1.最开始是根据屏幕计算加载的每页行数
2.framework可以糊了，由于是老项目还使用了sea.js
3.getUrlParam（）是用于其他页面带参数跳转的也可以忽略
functiongetUrlParam(name){
varreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)");//构造一个含有目标参数的正则表达式对象
varr=window.location.search.substr(1).match(reg);//匹配目标参数
if(r!=null)returndecodeURI(r[2]);returnnull;//返回参数值
}
4.templet属性用于对后端接收到的数据进行格式化，其他属性请自行查看官方文档
5.laypage中的jump方法!first必须加，否则会无限调用接口，无法结束初始化
具体js代码如下：
functiongetData(page){
varrows=Math.floor(($(window).height()-$('.topNav').height()
-$('.content.noBorderB').height()
-$('.content.searchD').height()
-$('.content.commonTbtr:eq(0)').height()-100)/30);
rows=rows<=0?1:rows;
framework.hideLoading();
varobjectIdSearch=getUrlParam("objectId");
if(objectIdSearch==''||objectIdSearch==undefined){
objectIdSearch=$.trim($("#idSearch").val());
}
varpages=1;
varcounts=1;
layui.use('table',function(){
vartable=layui.table;
varlaypage=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//全局定义常规单元格的最小宽度，layui2.2.1新增
,cols:[[
{field:'id',title:'ID',align:'center',sort:true,width:80}
,{field:'audioBook',width:80,align:'center',title:'有声书ID',templet:function(d){
returnd.audioBook.id
}}//width支持：数字、百分比和不填写。你还可以通过minWidth参数局部定义当前单元格的最小宽度，layui2.2.1新增
,{field:'audioBook',width:124,align:'center',title:'有声书名称',sort:true,templet:function(d){
returnd.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){
returnd.chapter.id
}}
,{field:'chapter.title',width:180,title:'章节名称',align:'center',templet:function(d){
returnd.chapter.title
}}//单元格内容水平居中
,{field:'payTimes',width:120,title:'购买次数',sort:true,align:'center'}//单元格内容水平居中
,{field:'createTime',width:180,title:'购买时间',sort:true,align:'center',templet:function(d){
returnlongTrans2Date(d.createTime)
}}
,{field:'userInfo',width:80,title:'用户ID',sort:true,align:'center',templet:function(d){
returnd.userInfo.userId
}}
,{field:'userInfo',width:160,title:'用户名称',sort:true,align:'center',templet:function(d){
returnd.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)
}
}
});
}
});
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。