xPagination.js Javascript分页组件

版本号:1.1
更新日期:2015-12-17
作者:脚儿网 实现思路解析
Git地址:可下载代码 说明:本页使用了console,请打开调试工具;可查看本页源代码直接下载代码

更新记录:

2015/12/31: 修复一个大意之下的bug:点下一页按钮无效(会跳到第1页)

使用方法:
var xxx = xPagination(pagediv, options);
其中pagediv是一个div节点,options是参数

options参数说明:
支持设置的选项:
max : 最多同时显示好多页
curr : 当前页码
size : 每页显示多少条,默认15。可以是15,30,50的任一个,如果传为false,则不显示切换每页显示条数的标签
    2015.12.17: size可以传入任何数字,如果不传值或传为false,则默认是15; 且不再与是否显示条数切换功能有关
pages : 总好多页。可以不传而只传items,则会由items和size计算出pages
items : 总数据条数推荐。使用这个参数,可以在切换每页显示条数时,动态修正页码数量
onpagination : 函数,在页码跳转时触发,此函数执行时会自动传入两个参数:page(当前页), size(当前页显示条数)
info : 是否显示页码信息,默认true,会加入一个page-text用来显示“共N页,当前是第n页”这样的信息
    2015.12.17: 新增功能,info可以是一个函数,此函数会接收options做为参数,返回一个字符串,插入到info的div中,且每次翻页都会刷新。
jump : 是否允许输入页码跳页,默认true,会加入一个页码输入框和确定按钮
prev :上一页按钮显示的文字,设为false则不显示上一页按钮,下同
next :下一页按钮显示的文字,同上
last :末页按钮显示的文字,同上;默认false (2015/12/14 去掉此选项,因为页码算法的改变,页码在任何时候,都会显示第一页和最后一页的页码,用不着用按钮来跳了)
first :首页按钮显示的文字,同上;默认false 2015/12/14去除
showSize : 2015.12.17是否显示左侧的切换每页多少条,默认false。如果设为true,则会显示当前页码分别乘以1,2,3的size切换;如果设为一个数组如[20,40,80],则会以此数组生成对应的size切换

xPagination实例的属性:

options : 对象,上面列出的静态设置选项
currPageElement : 当前页码的node
pageList : Node数组,页码node的列表

示例:

30/页,curr=2,max=8,info=true,jump=true,showSize为数组

max=7,showSize=true

showSize没传;max=10;curr=11;info为一个函数;jump=false:

没有上下页; showSize是个数组:
注:切换每页显示条数后,页码会重新生成,然后会自动跳到当前页最接近的页
注:样式不满意请自定义