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


Posted in Javascript onJuly 27, 2019

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

    }
   });

  })

 }

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

Javascript 相关文章推荐
简单的代码实现jquery定时器
Nov 17 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 #Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 #Javascript
基于ssm框架实现layui分页效果
Jul 27 #Javascript
layUI实现前端分页和后端分页
Jul 27 #Javascript
layui实现数据分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据分页功能
Jul 27 #Javascript
You might like
php命令行使用方法和命令行参数说明
2014/04/08 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
浅谈javascript的调试
2015/01/28 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Python 3 判断2个字典相同
2019/08/06 Python
学python爬虫能做什么
2020/07/29 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
三星美国官网:Samsung美国
2017/02/06 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
如何开发一个JQuery插件
2016/07/28 面试题
工作表现评语
2014/01/19 职场文书
建筑学专业自荐书
2014/07/09 职场文书
文艺晚会开场白
2015/05/29 职场文书
银行资信证明
2015/06/17 职场文书