前言：最近項目上使用layui做前端頁面，發(fā)現(xiàn)layui的table本身的分頁不能根據(jù)屏幕生成每頁行數(shù)，所以研究了下文檔，更改分頁
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：國際域名空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、羅定網(wǎng)站維護(hù)、網(wǎng)站推廣。
簡單解釋：
1.最開始是根據(jù)屏幕計算加載的每頁行數(shù)
2.framework可以糊了，由于是老項目還使用了sea.js
3.getUrlParam（）是用于其他頁面帶參數(shù)跳轉(zhuǎn)的也可以忽略
重慶分公司
重慶分公司
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構(gòu)造一個含有目標(biāo)參數(shù)的正則表達(dá)式對象
var r = window.location.search.substr(1).match(reg); //匹配目標(biāo)參數(shù)
if (r != null) return decodeURI(r[2]); return null; //返回參數(shù)值
}
4.templet屬性用于對后端接收到的數(shù)據(jù)進(jìn)行格式化，其他屬性請自行查看官方文檔
5.laypage中的jump方法!first必須加，否則會無限調(diào)用接口，無法結(jié)束初始化
具體js代碼如下：
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' //數(shù)據(jù)狀態(tài)的字段名稱，默認(rèn)：code
,statusCode: page //成功的狀態(tài)碼，默認(rèn)：0
,countName: 'records' //數(shù)據(jù)總數(shù)的字段名稱，默認(rèn)：count
,dataName: 'rows' //數(shù)據(jù)列表的字段名稱，默認(rèn)：data
}
// }
, cellMinWidth: 80 //全局定義常規(guī)單元格的最小寬度，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 支持：數(shù)字、百分比和不填寫。你還可以通過 minWidth 參數(shù)局部定義當(dāng)前單元格的最小寬度，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: '章節(jié)ID', templet: function(d){
return d.chapter.id
}}
, {field: 'chapter.title',width:180, title: '章節(jié)名稱', align: 'center', templet: function(d){
return d.chapter.title
}} //單元格內(nèi)容水平居中
, {field: 'payTimes',width:120, title: '購買次數(shù)', sort: true, align: 'center'} //單元格內(nèi)容水平居中
, {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)
}
}
});
}
});
})
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
