您好,登錄后才能下訂單哦!
前言:最近項(xiàng)目上使用layui做前端頁(yè)面,發(fā)現(xiàn)layui的table本身的分頁(yè)不能根據(jù)屏幕生成每頁(yè)行數(shù),所以研究了下文檔,更改分頁(yè)
簡(jiǎn)單解釋:
1.最開始是根據(jù)屏幕計(jì)算加載的每頁(yè)行數(shù)
2.framework可以糊了,由于是老項(xiàng)目還使用了sea.js
3.getUrlParam()是用于其他頁(yè)面帶參數(shù)跳轉(zhuǎn)的也可以忽略
function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構(gòu)造一個(gè)含有目標(biāo)參數(shù)的正則表達(dá)式對(duì)象 var r = window.location.search.substr(1).match(reg); //匹配目標(biāo)參數(shù) if (r != null) return decodeURI(r[2]); return null; //返回參數(shù)值 }
4.templet屬性用于對(duì)后端接收到的數(shù)據(jù)進(jìn)行格式化,其他屬性請(qǐng)自行查看官方文檔
5.laypage中的jump方法!first必須加,否則會(huì)無(wú)限調(diào)用接口,無(wú)法結(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: '購(gòu)買次數(shù)', sort: true, align: 'center'} //單元格內(nèi)容水平居中 , {field: 'createTime',width:180, title: '購(gòu)買時(shí)間', 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) } } }); } }); }) }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。