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

本文介绍了如何在layui2.0中,针对不同屏幕尺寸动态计算并设置table每页显示的行数。通过研究layui的table和laypage组件,实现了真正的分页功能。在老项目中,结合sea.js进行模块管理,同时利用getUrlParam()获取带参数的跳转。
摘要由CSDN通过智能技术生成

前言:最近项目上使用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 ? 
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值