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

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

    }
   });

  })

 }

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