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

港控/mmm° 2022-05-21 04:27 256阅读 0赞

*前言：最近项目上使用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)
                                }
                            }
                        });
    
                    }
                });
    
            })
    
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，256人围观）

还没有评论，来说两句吧...

相关阅读

相关 tp5+layui实现分页

layui和thinkphp5自己在百度上下载 html代码 <!DOCTYPE html> <html> <head> <meta c

青旅半醒/ 2023年03月01日 11:47/ 0 赞/ 204 阅读

相关 layui 分页

//分页 layui.laypage.render({ elem : 'pageInfo', count : ${ query.rs

忘是亡心i/ 2023年02月09日 14:11/ 0 赞/ 53 阅读

相关 Layui + ssm 分页

做后台就会涉及到表格数据，当数据多的时候，就要使用分页来显示，这样就显得比较美观。分页确实有效，但它一定会加大系统的复杂度，如果数据量少的话可以不用分页，但是对于企业信息系统来

男娘i/ 2022年12月08日 05:29/ 0 赞/ 259 阅读

相关 layui完美分页，ajax请求分页（真分页）【2.0版本】

强烈推荐分享一个大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到人工智能的队伍中来！[http://www.captainbed.net][h

待我称王封你为后i/ 2022年06月06日 00:29/ 0 赞/ 312 阅读

相关 layui实现数据分页功能

官网layui table演示页面：[http://www.layui.com/demo/table.html][http_www.layui.com_demo_table.h

小灰灰/ 2022年06月05日 06:53/ 0 赞/ 325 阅读

相关 layui实现数据分页功能

官网layui table演示页面：[http://www.layui.com/demo/table.html][http_www.layui.com_demo_table.h

冷不防/ 2022年06月04日 02:46/ 0 赞/ 376 阅读

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

前言：最近项目上使用layui做前端页面，发现layui的table本身的分页不能根据屏幕生成每页行数，所以研究了下文档，更改分页简单解释： 1.最开始是根据屏幕计算

港控/mmm°/ 2022年05月21日 04:27/ 0 赞/ 257 阅读

相关 layui分页

<div id="demo1"></div> js: var pageVal = 1;//第几页 var c

向右看齐/ 2022年01月10日 12:21/ 0 赞/ 452 阅读

相关 layui表格+pagehelper实现分页

在layui表格中增加属性page:true layui默认会传回两个参数，一个是limit,另一个是page; 其中limit是每页的条数，page是标识第几页然后我

╰+攻爆jí腚メ/ 2022年01月06日 00:11/ 0 赞/ 602 阅读

相关 layui实现分页（前后端）

1.前端html代码： <!DOCTYPE html> <html lang="en"> <head> <meta name="a

你的名字/ 2021年05月10日 11:33/ 0 赞/ 701 阅读