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

laypage DEMO:http://laypage.layui.com/

异步分页


 
//以下将以jQuery.Ajax为例,演示一个异步分页 $.getJSON('test/demo1.json', {curr: 6}, Function(res){ //从第6页开始请求。返回的json格式可以任意定义 laypage({ cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:
 

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: '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分页控件使用实例详解
本篇内容主要为大家讲解的是laypage分页控件使用实例详解。感兴趣的同学可以参考学习下,具体内容如下:

发布于 2017-04-02 22:58:29 | 340 次阅读


Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务