IT虾米网

layui的laypage分页插件使用详解

leader 2019年04月17日 编程语言 137 0
 
window.onload= function () { 
 
        loadData()  //请求数据 
        getPage()     //分页操作 
    } 
    var page=1; //设置首页页码 
    var limit=2;  //设置一页显示的条数 
    var total;    //总条数 
 
 
    function loadData(){ 
        $.ajax({ 
            type:"post", 
            url:"/it/orderManage/getOrderList",//对应controller的URL 
            async:false, 
            dataType: 'json', 
            data:{ 
                "pageIndex":page, 
                "pageSize":limit, 
            }, 
            success:function(ret){ 
                total=ret.total;  //设置总条数 
                console.log(ret); 
                var data1=ret.rows; 
                var html=''; 
                for(var i=0;i<data1.length;i++){ 
                    html+='<dl>'; 
                    html+=' <dt>'; 
                    html+='     <span class="s1">'+data1[i].CREATE_TIME+'</span>'; 
                    html+='     <span class="s2">'+data1[i].STAGE_NAME+'</span>'; 
                    html+=' </dt>'; 
                    html+=' <dd class="d1">'; 
                    html+='     价格:<span>¥'+data1[i].REWARD_FEE+'</span>'; 
                    html+=' </dd>'; 
                    html+=' <dd class="d1">'; 
                    html+='     名称:<span>'+data1[i].ORDER_NAME+'</span>'; 
                    html+=' </dd>'; 
                    html+=' <dd class="d1">'; 
                    html+='     人数:<span>'+data1[i].TAKE_NUM+'人参与</span>'; 
                    html+=' </dd>'; 
                    html+=' <dd class="d1">'; 
                    html+='     时间:<span>'+data1[i].START_DATE+'点 -- '+data1[i].END_DATE+'点</span>'; 
                    html+=' </dd>'; 
                    html+='</dl>'; 
 
                } 
                console.log(html) 
                $(".orderList").empty().append(html); 
 
            } 
        }); 
    } 
 
 
    function getPage(){ 
        layui.use('laypage', function(){ 
            var laypage = layui.laypage; 
 
            //执行一个laypage实例 
            laypage.render({ 
                elem: 'laypage' //注意,这里的 test1 是 ID,不用加 # 号 
                ,count: total, //数据总数,从服务端得到 
                limit:limit,   //每页条数设置 
                jump: function(obj, first){ 
                    //obj包含了当前分页的所有参数,比如: 
                    console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。 
                    console.log(obj.limit); //得到每页显示的条数 
                    page=obj.curr;  //改变当前页码 
                    limit=obj.limit; 
                    //首次不执行 
                    if(!first){ 
                        loadData()  //加载数据 
                    } 
                } 
            }); 
        }); 
    }

以上是前台js,后台配合对应的分页插件就可以实现分页效果了。我用的是mybatis的pageHelper

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

EL表达式无法显示,直接显示${xxx}详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。