layui的laypage分页插件使用详解编程语言

 
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