最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

layui2.0使用table+laypage实现真分页

来源:动视网 责编:小采 时间:2020-11-27 21:53:14
文档

layui2.0使用table+laypage实现真分页

layui2.0使用table+laypage实现真分页:前言:最近项目上使用layui做前端页面,发现layui的table本身的分页不能根据屏幕生成每页行数,所以研究了下文档,更改分页 简单解释: 1.最开始是根据屏幕计算加载的每页行数 2.framework可以糊了,由于是老项目还使用了sea.js 3.getUrlP
推荐度:
导读layui2.0使用table+laypage实现真分页:前言:最近项目上使用layui做前端页面,发现layui的table本身的分页不能根据屏幕生成每页行数,所以研究了下文档,更改分页 简单解释: 1.最开始是根据屏幕计算加载的每页行数 2.framework可以糊了,由于是老项目还使用了sea.js 3.getUrlP


前言:最近项目上使用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 ? 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' //数据状态的字段名称,默认: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)
 }
 }
 });

 }
 });

 })

 }

文档

layui2.0使用table+laypage实现真分页

layui2.0使用table+laypage实现真分页:前言:最近项目上使用layui做前端页面,发现layui的table本身的分页不能根据屏幕生成每页行数,所以研究了下文档,更改分页 简单解释: 1.最开始是根据屏幕计算加载的每页行数 2.framework可以糊了,由于是老项目还使用了sea.js 3.getUrlP
推荐度:
标签: 分页 table layui
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top