* 2017.5.11 增加了迭代回调功能，用于实现实时的页数展示与分页数据请求。
* 2016.7.03 修复bug，优化代码逻辑
* 2016.5.25 修复如果找不到目标对象的错误抛出。
* 2016.5.11 修复当实际页数（pageNumber）小于生成的页码间隔数时的bug
* 2016.4.3 实现原生JS分页功能
;
(function(root) {
'use strict'; function page(params) { this.dom = params.dom || null;
this.fn = params.fn || null;
this.padding = params.padding || 2;
this.total = params.total;
this.curpagenumber = params.curpagenumber || 0;
this.detailed = params.detailed || null; this.cur = 1;
this.start = 1;
this.end = this.total; if (this.curpagenumber) {
this.cur = this.curpagenumber;
} this.dom && this.total && this.core(); }
page.prototype.core = function(curentPageNumber) {
var a = []; if (curentPageNumber) {
this.cur = curentPageNumber;
} if (this.cur > 1) {
a.push('<a href="javascript:;" class="prev">上一页</a>');
this.detailed && a.push('<a href="javascript:;" class="first">首页</a>');
a.push('...');
} if (this.total > this.padding * 2 + 1) { //判断是否启用间隔数，如果总页数大于间隔数的2倍加1的话。
if (this.cur <= this.padding) { // 如果当前页码小于间隔数
this.start = 1;
this.end = this.padding * 2 + 1;
} else if (this.cur > this.padding && this.total >= this.cur + this.padding) { // 如果当前页码大于间隔数且总页数大于当前页面加上间隔数
this.start = this.cur - this.padding;
this.end = this.cur + this.padding;
} else {
this.start = this.total - this.padding * 2;
this.end = this.total;
}
} else {
this.start = 1,
this.end = this.total;
} for (; this.start <= this.end; this.start++) {
if (this.cur != this.start) {
a.push('<a href="javascript:;">' + this.start + '</a>');
} else {
a.push('<span class="cur">' + this.cur + '</span>');
}
}
if (this.cur < this.total - 1) {
a.push('...');
this.detailed && a.push('<a href="javascript:;" class="last">尾页</a>');
}
if (this.cur < this.total) {
a.push('<a href="javascript:;" class="next">下一页</a>');
} this.dom.innerHTML = a.join('');
this.bind();
}; page.prototype.bind = function() {
var _this = this; this.dom.onclick = function(event) {
var event = event || window.event,
src = event.srcElement || event.target; if (src.nodeName == 'A') {
switch (src.className) {
case '':
_this.cur = parseInt(src.innerHTML);
break;
case 'prev':
_this.cur = --_this.cur;
break;
case 'next':
_this.cur = ++_this.cur;
break;
case 'last':
_this.cur = _this.total;
break;
case 'first':
_this.cur = 1;
}
_this.fn && _this.fn(_this.cur);
_this.core();
}
}; }; root.page = page; })(window);
一般使用方式：
page({
'dom':document.getElementById('page'),
'total':13,
'padding':2,
'fn':function(cur){
console.log(cur);
}
});
/* {} 是一个参数对象，其参数详细如下：
|- dom ：一个dom对象，用于保存生成的页码。
|- total : 总页数。
|- padding : 生成的间隔,默认间隔为2个。
|- detailed : 是否出现首页及尾页
|- fn : 当前页码的回调函数。
*/
高级使用方式：在接口中回调
function getData(pageNum) {
$.post('data.htm', {
'pageNumber': pageNum
}, function(data) {
if (data.errorCode === 0) {
page({
dom: document.querySelectorAll('.pages')[0],
total: data.total,
curpagenumber: pageNum,
fn: function(num) {
getData(num);
}
});
}
})
}