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

最新推荐文章于 2024-09-06 09:05:47 发布

万万没想到0831

最新推荐文章于 2024-09-06 09:05:47 发布

阅读量8.9k

点赞数 1

分类专栏：平时遇到的问题文章标签： layui 分页

本文链接：https://blog.csdn.net/qq_36752632/article/details/80860267

版权

本文介绍了如何在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 ?