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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
详解JavaScript的变量
Apr 04 Javascript
优化Vue中date format的性能详解
Jan 13 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
ADODB类使用
2006/11/25 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
介绍Python中的fabs()方法的使用
2015/05/14 Python
python中正则表达式的使用方法
2018/02/25 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
python文件及目录操作代码汇总
2020/07/08 Python
python中pickle模块浅析
2020/12/29 Python
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
阳光体育活动实施方案
2014/05/25 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
晚会闭幕词
2015/01/28 职场文书
委托书英文
2015/01/28 职场文书
2015年读书月活动总结
2015/03/26 职场文书
仓库管理制度范本
2015/08/04 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
原生JS实现分页
2022/04/19 Javascript