前言:最近项目上使用layui做前端页面,发现layui的table本身的分页不能根据屏幕生成每页行数,所以研究了下文档,更改分页
简单解释:
1.最开始是根据屏幕计算加载的每页行数
2.framework可以糊了,由于是老项目还使用了sea.js
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必须加,否则会无限调用接口,无法结束初始化
具体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 "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)
}
}
});
}
});
})
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]