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 相关文章推荐
Javascript 去除数组的重复元素
May 04 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
javascript中Object使用详解
Jan 26 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
Angular6新特性之Angular Material
Dec 28 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 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中的正则表达式函数介绍
2012/02/27 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
局域网标准
2016/09/10 面试题
Linux面试题LINUX系统类
2015/11/25 面试题
会计实习自我鉴定
2013/12/04 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
安全生产汇报材料
2014/02/17 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS