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

 更新时间:2019年07月27日 17:18:00   作者:万万没想到367  
这篇文章主要为大家详细介绍了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)
       }
      }
     });

    }
   });

  })

 }

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

相关文章

  • Bootstrap基本插件学习笔记之Alert警告框(20)

    Bootstrap基本插件学习笔记之Alert警告框(20)

    这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之ALert警告框的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS中捕获console.log()输出的方法

    JS中捕获console.log()输出的方法

    这篇文章主要介绍了JS中捕获console.log()输出的方法,实例分析了实现获取console.log输出的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 轻量级JS Cookie插件js-cookie的使用方法

    轻量级JS Cookie插件js-cookie的使用方法

    js-cookie插件是一个JS操作cookie的插件,源文件只有3.34 KB,非常轻量级,js-cookie也支持npm和Bower安装和管理,下面看看js-cookie的具体用法
    2018-03-03
  • 深入学习js函数的隐式参数 arguments 和 this

    深入学习js函数的隐式参数 arguments 和 this

    这篇文章主要介绍了 深入学习js函数的隐式参数 arguments 和 this,arguments是一个类数组结构,它保存了调用时传递给函数的所有实参;this是函数执行时的上下文对象, 这个对象有些让人感到困惑的行为。 下面分别对他们进行讨论。,需要的朋友可以参考下
    2019-06-06
  • 三种Webpack打包方式(小结)

    三种Webpack打包方式(小结)

    这篇文章主要介绍了三种Webpack打包方式(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • ES6中Array.copyWithin()函数的用法实例详解

    ES6中Array.copyWithin()函数的用法实例详解

    ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
    2017-09-09
  • JavaScript事件委托原理与用法实例分析

    JavaScript事件委托原理与用法实例分析

    这篇文章主要介绍了JavaScript事件委托原理与用法,结合实例形式较为详细的分析了JavaScript事件流以及事件委托相关原理、用法与操作注意事项,需要的朋友可以参考下
    2018-06-06
  • javascript+css实现进度条效果

    javascript+css实现进度条效果

    这篇文章主要为大家详细介绍了javascript+css实现进度条效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • nest.js 使用express需要提供多个静态目录的操作方法

    nest.js 使用express需要提供多个静态目录的操作方法

    这篇文章主要介绍了nest.js 使用express需要提供多个静态目录的操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 使用uniapp打包微信小程序时主包和vendor.js过大解决(uniCloud的插件分包)

    使用uniapp打包微信小程序时主包和vendor.js过大解决(uniCloud的插件分包)

    每个使用分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar页面,以及一些所有分包都需用到公共资源/JS 脚本,下面这篇文章主要给大家介绍了关于使用uniapp打包微信小程序时主包和vendor.js过大解决的相关资料,,需要的朋友可以参考下
    2023-02-02

最新评论