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 三种编解码方式
Feb 01 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
JSON取值前判断
Dec 23 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
koa-passport实现本地验证的方法示例
Feb 20 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中include()与require()的区别说明
2010/03/10 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Python实现全排列的打印
2018/08/18 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
python with语句的原理与用法详解
2020/03/30 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
生产部岗位职责范文
2014/02/07 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
居委会工作总结2015
2015/05/18 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android