DDR爱好者之家 Design By 杰米
前言:最近项目上使用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) } } }); } }); }) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]