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 相关文章推荐
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
ES6中定义类和对象的方法示例
Jul 31 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
教师自荐信范文
2013/12/09 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
如何写求职信
2014/05/24 职场文书
贷款委托书
2014/08/01 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
物业公司管理制度
2015/08/05 职场文书