LayPage 1.0 发布,适用多场景 JavaScript 分页

贤心
 贤心
发布于 2014年12月11日
收藏 115

laypage主要应用于前端页面Ajax普通分页以及信息流加载,并且可无缝迁移至Node.js平台。她不依赖于任何第三方库,直接拿来用即可,其接口继承了layui系列组件的一贯简洁,极易上手。那么,从现在开始,将分页的任务交给laypage吧!

加载laypage

获得laypage包后,把整个文件存放到你的目录。直接通过script标签引入laypage.js即可,无需引入css。你还可以通过seajs或者requirejs加载laypage。如:

var laypage = require('laypage');
laypage({
    cont: 'id',
    pages: 11,
    …
})

使用

laypage并没有额外去封装Ajax,她只负责分页的核心功能,并且提供了关键性回调函数jump,每触发一次跳页,jump都会被执行,并且返回一些配置信息,其中包括当前页(curr),通过它,你可以去向服务端请求指定数据,如

laypage({
    cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>
    pages: 66, //总页数
    curr: 6, //当前页
    jump: function(e){ //触发分页后的回调
        //触发分页后的回调
        var curr = e.curr; //获得当前页后,去向服务端发送请求,获得相关数据。
    }
});

laypage还可以自定义皮肤

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

开启跳页

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

自定义文本

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

开启hash。laypage会自动对url追加#!laypage_{id}={curr}。利用这个,可以在页面载入时就定位到指定页

laypage({
    cont: 'page6', //容器。值支持id名、原生dom对象,jquery对象,
    pages: 68, //总页数
    hash: true, //会对url追加#!laypage_
    jump: function(obj){
        
    }
});

只出现上一页/下一页

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

信息流

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

更详细的文档以及DEMO,参见:http://sentsin.com/layui/laypage

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:LayPage 1.0 发布,适用多场景 JavaScript 分页
加载中

最新评论(15

LarryKoo
LarryKoo
@贤心
关于计算连续页码的算法,我自己是这么计算的。
//以下为java代码:
// pageNumber 为当前页current页码嘛
// pageGroup 为连续分页数
// totalPage 为总页数
Integer start = Math.max(1, pageNumber - pageGroup / 2);
Integer end = Math.min(start + (pageGroup - 1), totalPage);

感觉LayPage计算连续分页的部分略有显得臃肿,也有可能是我没有明白作者的真正意图。
计算顺序页有别,LayPage是先计算当前组,然后判断出是否需要输出首页和"..."。
如果换成先计算连续页码,那么就可以根据start非常方便的计算出是否需要输入首页和"..."。
如下:
if(start != 1) {
//计算出起始页,只要开始页码不等于首页,这里就可以输出首页和"..."
}

以上愚见,旨在希望帮助LayPage继续优化和改进。
我自己是写了一个Beetl2+JFinal的java版本,和一个javascript的版本。
贤心
贤心

引用来自“JettyKoo”的评论

看了LayPage的分页算法部分,个人觉得还有很大的改善空间,特别是对于是否显示首页和现实尾页的部分和是否会显示"..." 的部分。
另外计算可连续页码的起始值其实可以两行代码就计算出来了,作者却用来那么多复杂多用的设计。

其中有大量conf.groups !== 0的判断,如果中间页码显示0,那其实就是不显示任何页码,这里是否可以在分页算法进入前单独判断,如果都等于0了,那就不需要再进入算法去计算了。

@贤心
以上属于个人简介,如故口误,勿怪。
本来想去github上提Isuse的,结果作者gitHub好像没LayPage这个东西。

引用来自“贤心”的评论

另外欢迎您多去测试一下laypage提供的各项基础参数:http://sentsin.com/layui/laypage/doc.html
laypage的设计初衷是多场景。

引用来自“JettyKoo”的评论

源码已经仔细读过了,如果放到github,我想我会去提pullRequest的
嗯,明天有时间我就放上去,3Q
LarryKoo
LarryKoo

引用来自“JettyKoo”的评论

看了LayPage的分页算法部分,个人觉得还有很大的改善空间,特别是对于是否显示首页和现实尾页的部分和是否会显示"..." 的部分。
另外计算可连续页码的起始值其实可以两行代码就计算出来了,作者却用来那么多复杂多用的设计。

其中有大量conf.groups !== 0的判断,如果中间页码显示0,那其实就是不显示任何页码,这里是否可以在分页算法进入前单独判断,如果都等于0了,那就不需要再进入算法去计算了。

@贤心
以上属于个人简介,如故口误,勿怪。
本来想去github上提Isuse的,结果作者gitHub好像没LayPage这个东西。

引用来自“贤心”的评论

另外欢迎您多去测试一下laypage提供的各项基础参数:http://sentsin.com/layui/laypage/doc.html
laypage的设计初衷是多场景。
源码已经仔细读过了,如果放到github,我想我会去提pullRequest的
贤心
贤心

引用来自“JettyKoo”的评论

看了LayPage的分页算法部分,个人觉得还有很大的改善空间,特别是对于是否显示首页和现实尾页的部分和是否会显示"..." 的部分。
另外计算可连续页码的起始值其实可以两行代码就计算出来了,作者却用来那么多复杂多用的设计。

其中有大量conf.groups !== 0的判断,如果中间页码显示0,那其实就是不显示任何页码,这里是否可以在分页算法进入前单独判断,如果都等于0了,那就不需要再进入算法去计算了。

@贤心
以上属于个人简介,如故口误,勿怪。
本来想去github上提Isuse的,结果作者gitHub好像没LayPage这个东西。
另外欢迎您多去测试一下laypage提供的各项基础参数:http://sentsin.com/layui/laypage/doc.html
laypage的设计初衷是多场景。
贤心
贤心

引用来自“JettyKoo”的评论

看了LayPage的分页算法部分,个人觉得还有很大的改善空间,特别是对于是否显示首页和现实尾页的部分和是否会显示"..." 的部分。
另外计算可连续页码的起始值其实可以两行代码就计算出来了,作者却用来那么多复杂多用的设计。

其中有大量conf.groups !== 0的判断,如果中间页码显示0,那其实就是不显示任何页码,这里是否可以在分页算法进入前单独判断,如果都等于0了,那就不需要再进入算法去计算了。

@贤心
以上属于个人简介,如故口误,勿怪。
本来想去github上提Isuse的,结果作者gitHub好像没LayPage这个东西。
嗯,非常感谢反馈!下面我针对你提到的逐一回复一下把。
首先分页本身并不复杂,寥寥几句代码就可以实现了,但是一旦把它组件化,就必须要考虑接口方面各种情况的发生,这也是在逻辑判断条件,出现多重“或且”的原因。
一、显示首页的条件:dict.index > 1 && conf.first && conf.groups !== 0
a)dict.index是触发首页的必备条件,即连续分页非第一组。
b)conf.first是暴露在外的参数,使用方法时若first传入false,首页不予显示
c)而至于conf.groups !== 0。groups代表连续分页数(页组),也是对外暴露的参数。如果它为0,显然就不应该显示首页了,这方便信息流场景的呈现。

二、显示尾页的条件:conf.pages > conf.groups && dict.end < conf.pages && conf.last && conf.groups !== 0
a)conf.pages代表总页面,向外暴露的参数,如果设置的页组大于总页面数,那显然不满足显示尾页的条件
b)dict.end是当前页组的最大数,显然它必须小于总页数,才能满足尾页条件
c)conf.last是向外暴露的参数,同conf.first类似。
d)最后一个条件conf.groups !== 0就不再解释了,见前面的阐述。

三、连续分页数本身的确简单,如果grunts(页组)是固定某个值的话(比如5),或者只是奇数而不是奇偶都支持,那也就是-2、+2的事,但是为什么我会用上16行代码?我想没有认真会考虑各种场景,是很难理解的。

还是那句话吧,任何一个东西一旦面向大众,就必须考虑更多。。
贤心
贤心
嗯,非常感谢反馈!下面我针对你提到的逐一回复一下把。
首先分页本身并不复杂,寥寥几句代码就可以实现了,但是一旦把它组件化,就必须要考虑接口方面各种情况的发生,这也是在逻辑判断条件,出现多重“或且”的原因。
一、显示首页的条件:dict.index > 1 && conf.first && conf.groups !== 0
a)dict.index是触发首页的必备条件,即连续分页非第一组。
b)conf.first是暴露在外的参数,使用方法时若first传入false,首页不予显示
c)而至于conf.groups !== 0。groups代表连续分页数(页组),也是对外暴露的参数。如果它为0,显然就不应该显示首页了,这方便信息流场景的呈现。

二、显示尾页的条件:conf.pages > conf.groups && dict.end < conf.pages && conf.last && conf.groups !== 0
a)conf.pages代表总页面,向外暴露的参数,如果设置的页组大于总页面数,那显然不满足显示尾页的条件
b)dict.end是当前页组的最大数,显然它必须小于总页数,才能满足尾页条件
c)conf.last是向外暴露的参数,同conf.first类似。
d)最后一个条件conf.groups !== 0就不再解释了,见前面的阐述。

三、连续分页数本身的确简单,如果grunts(页组)是固定某个值的话(比如5),或者只是奇数而不是奇偶都支持,那也就是-2、+2的事,但是为什么我会用上16行代码?我想没有认真会考虑各种场景,是很难理解的。

还是那句话吧,任何一个东西一旦面向大众,就必须考虑更多。。
LarryKoo
LarryKoo
看了LayPage的分页算法部分,个人觉得还有很大的改善空间,特别是对于是否显示首页和现实尾页的部分和是否会显示"..." 的部分。
另外计算可连续页码的起始值其实可以两行代码就计算出来了,作者却用来那么多复杂多用的设计。

其中有大量conf.groups !== 0的判断,如果中间页码显示0,那其实就是不显示任何页码,这里是否可以在分页算法进入前单独判断,如果都等于0了,那就不需要再进入算法去计算了。

@贤心
以上属于个人简介,如故口误,勿怪。
本来想去github上提Isuse的,结果作者gitHub好像没LayPage这个东西。
贤心
贤心

引用来自“缪斯的情人”的评论

我以为是拉里佩奇呢
哈哈,是有点神似哈
若水191
若水191
不错,赞一个
ruanzy
ruanzy
赞一个
返回顶部
顶部