layui2.0使用table+laypage实现真分页
2019-07-27 17:18
2271 查看
前言:最近项目上使用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) } } }); } }); }) }
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- thinkPHP5 使用laypage分页插件实现列表分页功能
- [Extjs] Ext4 Ext.grid.Panel 分页实现(mybatis 分页插件-PageHelper 使用)
- mybatis使用PageHelper实现分页的技术
- js多功能分页组件layPage使用方法详解
- SSM 使用 mybatis 分页插件 pagehepler 实现分页
- vue分页组件table-pagebar使用实例解析
- 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- ASP.NET 使用DataTable在Table中实现自定义分页
- SSM框架下用laypage和ajax实现分页和数据交互
- 使用Laypage进行分页
- laypage.js分页插件使用总结
- Web 表格table实现横向滚动条以及时间组件laydate的使用
- 使用springboot实现通用mapper和分页插件PageHelper
- ssm+maven 使用pagehelper插件实现后端分页
- jquery:使用按钮对table实现分页
- pageHelper分页插件实现原理及使用方法
- IOS——使用ScrollView和PageController实现引导页分页效果
- 使用Bootstrap-table实现ssm框架的分页Demo
- layUI框架--laypage+SpringMVC实现后端分页