关闭

多功能JavaScript分页组件 layPage

120人阅读 评论(0) 收藏 举报
分类:

官方网站:http://laypage.layui.com/

layPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载,并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库,直接拿来用即可,它的接口继承了layui系列组件的一贯简洁,极易上手。


<div id="page1" ></div>

//以下将以jquery.ajax为例,演示一个异步分页  
$.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义  
    laypage({  
        cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>  
        pages: res.pages, //通过后台拿到的总页数  
        curr: 6, //初始化当前页  
        jump: function(e){ //触发分页后的回调  
            $.getJSON('test/demo1.json', {curr: e.curr}, function(res){  
                e.pages = e.last = res.pages; //重新获取总页数,一般不用写  
                //渲染  
                var view = document.getElementById('view1'); //你也可以直接使用jquery  
                var demoContent = (new Date().getTime()/Math.random()/1000)|0; //此处仅仅是为了演示  
                view.innerHTML = res.content + demoContent;   
            });  
        }  
    });  
}); 




 laypage({  
            cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>  
            pages: res.pageCount, //通过后台拿到的总页数  
            curr: 1, //初始化当前页  
            skin: '#429842',//皮肤颜色  
            groups: 3, //连续显示分页数  
            skip: true, //是否开启跳页  
            first: '首页', //若不显示,设置false即可  
            last: '尾页', //若不显示,设置false即可  
            //prev: '<', //若不显示,设置false即可  
            //next: '>', //若不显示,设置false即可  
            jump: function (e) { //触发分页后的回调  
                $.getJSON('/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById', {  
                    type: 2,  
                    ccId: ccId,  
                    pageIndex: e.curr,//当前页  
                    pageSize: pageSize,  
                    saveKey: saveKey  
                }, function (res) {  
                    e.pages = e.last = res.pageCount; //重新获取总页数,一般不用写  
                    //渲染  
                    var view = document.getElementById('userTable'); //你也可以直接使用jquery  
                    //解析数据  
                    var resultHtml = PackagData(res);  
                    view.innerHTML = resultHtml;  
                });  
            }  
        });  
    }); 

2.整页刷新式跳转

//好像很实用的样子,后端的同学再也不用写分页逻辑了。
laypage({
    cont: 'page11',
    pages: 18, //可以叫服务端把总页数放在某一个隐藏域,再获取。假设我们获取到的是18
    curr: function(){ //通过url获取当前页,也可以同上(pages)方式获取
        var page = location.search.match(/page=(\d+)/);
        return page ? page[1] : 1;
    }(), 
    jump: function(e, first){ //触发分页后的回调
        if(!first){ //一定要加此判断,否则初始时会无限刷新
            location.href = '?page='+e.curr;
        }
    }
});


laypage({
    cont: 'page4', //容器。值支持id名、原生dom对象,jquery对象,
    pages: 11, //总页数
	skip: true, //是否开启跳页
    skin: '#AF0000',//皮肤
    groups: 3 //连续显示分页数
    first: 1, //将首页显示为数字1,。若不显示,设置false即可
    last: 11, //将尾页显示为总页数。若不显示,设置false即可
    prev: '<', //若不显示,设置false即可
    next: '>' //若不显示,设置false即可
});



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:103870次
    • 积分:1599
    • 等级:
    • 排名:千里之外
    • 原创:224篇
    • 转载:151篇
    • 译文:1篇
    • 评论:7条
    文章分类
    最新评论