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

前端  /  管理员 发布于 5年前   459

前言：最近项目上使用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)       }      }     });    }   });  }) }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• laypage.js分页插件使用方法详解
• 基于layPage插件实现两种分页方式浅析
• thinkPHP3.2.3结合Laypage实现的分页功能示例
• thinkPHP5使用laypage分页插件实现列表分页功能
• 基于LayUI分页和LayUI laypage分页的使用示例
• VUEJS实战之利用laypage插件实现分页（3）
• laypage分页控件使用实例详解
• js多功能分页组件layPage使用方法详解
• laypage前端分页插件实现ajax异步分页
• laypage+SpringMVC实现后端分页