layPage是一款多功能的js分页组件

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

先看个实例

上一页 首页 … 41 42 43 44 45 … 尾页 下一页

假设这是分页内容。它在随分页变换：1663853297

//以下将以jquery.ajax为例，演示一个异步分页
function demo(curr){
    $.getJSON('test/demo1.json', {
        page: curr || 1 //向服务端传的参数，此处只是演示
    }, function(res){
        //此处仅仅是为了演示变化的内容
        var demoContent = (new Date().getTime()/Math.random()/1000)|0;
        document.getElementById('view1').innerHTML = res.content + demoContent;
        //显示分页
        laypage({
            cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
            pages: res.pages, //通过后台拿到的总页数
            curr: curr || 1, //当前页
            jump: function(obj, first){ //触发分页后的回调
                if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                    demo(obj.curr);
                }
            }
        });
    });
};
//运行
demo();

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23

默认版对应代码laycode - v1.1

整页刷新式跳转

1 2 3 4 5 … 尾页 下一页

//好像很实用的样子，后端的同学再也不用写分页逻辑了。
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;
        }
    }
});

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14

默认版对应代码laycode - v1.1

自定义皮肤

1 2 3 4 5 6 7 … 尾页 下一页

laypage({
    cont: document.getElementById('page2'), //容器。值支持id名、原生dom对象，jquery对象,
    pages: 100, //总页数
    skin: 'yahei', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
    groups: 7 //连续显示分页数
});

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6

对应代码说明laycode - v1.1

开启跳页

上一页 首页 … 13 14 15 … 尾页 下一页 到第页 确定

laypage({
    cont: $('#page3'), //容器。值支持id名、原生dom对象，jquery对象,
    pages: 100, //总页数
    skip: true, //是否开启跳页
    skin: '#AF0000',
    groups: 3 //连续显示分页数
});

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7

对应代码说明laycode - v1.1

自定义文本

1 2 3 4 5 … 11 >

laypage({
    cont: 'page4', //容器。值支持id名、原生dom对象，jquery对象,
    pages: 11, //总页数
    skin: 'molv', //皮肤
    first: 1, //将首页显示为数字1,。若不显示，设置false即可
    last: 11, //将尾页显示为总页数。若不显示，设置false即可
    prev: '<', //若不显示，设置false即可
    next: '>' //若不显示，设置false即可
});

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

对应代码说明laycode - v1.1

隐藏首页和尾页

1 2 3 4 5 下一页

laypage({
    cont: 'page5', //容器。值支持id名、原生dom对象，jquery对象,
    pages: 11, //总页数
    first: false,
    last: false
});

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6

对应代码说明laycode - v1.1

开启hash

1 2 3 4 5 … 尾页 下一页

看看URL的变化。通过hash，你可以记录当前页。当前正处于第1页

laypage({
    cont: 'page6', //容器。值支持id名、原生dom对象，jquery对象,
    pages: 68, //总页数
    curr: location.hash.replace('#!fenye=', ''), //获取hash值为fenye的当前页
    hash: 'fenye', //自定义hash值
    jump: function(obj){
        $('#view6').html('看看URL的变化。通过hash，你可以记录当前页。当前正处于第'+obj.curr+'页');
    }
});

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

对应代码说明laycode - v1.1

只出现上一页/下一页

目前正在第1页，一共有：11页

下一页

laypage({
    cont: 'page7', //容器。值支持id名、原生dom对象，jquery对象,
    pages: 11, //总页数
    groups: 0,
    first: false,
    last: false,
    jump: function(obj){
        $('#view7').html('目前正在第'+ obj.curr +'页，一共有：'+ obj.pages +'页');
    }
});

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10

对应代码说明laycode - v1.1

信息流

查看更多

laypage({
    cont: 'page8', //容器。值支持id名、原生dom对象，jquery对象,
    pages: 7, //总页数
    groups: 0, //连续分数数0
    prev: false, //不显示上一页
    next: '查看更多',
    skin: 'flow', //设置信息流模式的样式
    jump: function(obj){
        if(obj.curr === 6){
            this.next = '没有更多了';
        }
        $('#view8').append(appendimg(obj.curr));
    }
});

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14

对应代码说明laycode - v1.1

其他例子