少于10页
大于10页就会出现省略号,原则是中间5页,左侧固定1页,右侧固定1页,如果省略号只省略了1页,则不显示省略号
大于100页就不会显示总页数了,因为我觉得没必要,哈哈哈
/*!
* -------------------------------------------------------------
* 分页插件, 生成分页页码, 并负责点击事件的处理
* -------------------------------------------------------------
* 必须的JS: jquery.1.4.js
* -------------------------------------------------------------
* $(xxx).zhhpaging(index, count, callback)
* index(int): 当前页数
* count(int): 总页数
* callback(function): 回调函数, 回调参数为index, count
* -------------------------------------------------------------
* $(xxx).zhhpaging(index, count, form)
* form(String): 表单名, 自动查找表单下的name=page元素, 设置value, 并提交表单
* -------------------------------------------------------------
* .auto-zhh-paging 自动分页
* data-index指定当前页数, data-count指定总页数, data-form指定表单名
* 自动调用第二种方式: $(".auto-zhh-paging").zhhpaging(index, count, form);
* <div class="auto-zhh-paging" data-index="1" data-count="20" data-form="search"></div>
* -------------------------------------------------------------
* author: 赵卉华
* date: 2014-01-08
* -------------------------------------------------------------
*/
(function($) {
var findForm = function(name) {
var form = undefined;
if (name instanceof jQuery || name.constructor == jQuery) {
form = name;
} else if (typeof(name) == "string") {
form = $("form[name=" + name + "]");
}
return form && form.length > 0 ? form : undefined;
};
var go = function(event) { // 翻页处理函数
var self = $(this), wrap = self.closest("p"); // 分页面板
// 滚动至哪一页, 上一页下一页取data-index, 页码取text()
var index = self.attr("value") || self.text(),
count = event.data.count, // 总页数
callback = event.data.callback; // 回调函数
if (callback) {
var form;
if ($.isFunction(callback)) { // 回调函数
// 重新生成分页页码, 因为有可能通过AJAX方式更新数据
wrap.parent().zhhpaging(index, count, callback);
callback.call(wrap.find(".on").get(0), index, count);
} else if (form = findForm(callback)) { // 表单名
// 无需生成分页页码, 因为提交表单会导致整个页面刷新
var input = form.find("input[name=page]"); // 查找page字段
if (input.length == 0) { // 没有page字段则创建
input = $("<input name='page'>").appendTo(form);
}
input.val(index); // 设置page字段的值
form.submit(); // 提交表单
}
} else { // 未指定回调方式, 重新生成分页页码, 用于演示页码变化情况
wrap.parent().zhhpaging(index, count, callback);
}
return false;
};
var create = function(index, count, callback) {
// L=左侧,R=右侧,M=中间显示几个页码,
// T=过渡页码,count超过这个数则不显示右侧的页码,只显示过渡页码
// 如L=1,R=1,M=3,T=100(过渡页面=100)
// count=80,index=10, 则结果为 [1]...[9][10][11]...[80]
// count=200,index=10, 则结果为 [1]...[9][10][11]...[100]...
// count=200,index=150, 则结果为 [1]...[100]...[149][150][151]...
var L=1, R=1, M=5, T=100,
cnt = parseInt(count), idx = parseInt(index), // 转换为数字
param = { count:cnt, callback:callback };
var wrap = $(this).addClass("zhh-paging").children("p:first").empty();
if (wrap.length == 0) {
wrap = $("<p>").appendTo(this);
}
var add = function(p) {
if (p === undefined) {
wrap.append($("<i>").append("..."));
} else if (p == idx) {
wrap.append($("<a>").addClass("on").append(p));
} else {
var a = $("<a>").attr("href", "#page="+p)
.bind("click", param, go);
wrap.append(a.append(p));
}
wrap.append(" ");
};
if (cnt <= M+L+R+2) { // 总页数很少, 少到不需要显示省略号
for(var i=1; i<=cnt; i++) {
add(i);
}
} else {
var h = Math.floor(M/2),
bgn = Math.min(Math.max(idx-h, L+2), cnt-M-R),
end = Math.min(Math.max(idx+h, M+L+1), cnt-R-1);
for (var i = 1; i <= L; i++) { // 左侧页码
add(i);
}
if (bgn <= L+2) { // 紧靠左侧页码的页码
add(L+1);
} else {
add(); // 省略号
}
if (bgn > T+2) { add(T);add();} // 过渡页码
for (var i = bgn; i <= end; i++) {
add(i); // 中间页码
}
if (end >= cnt-R-1) { // 紧靠右侧页码的页码
add(cnt-R);
} else {
add(); // 省略号
}
// 总页数不大或即将达到总页数, 则显示
if (cnt <= T || end >= cnt-R-1) {
for(var i = cnt-R+1; i <= cnt; i++) {
add(i); // 右侧页码
}
} else if(end < T-2) {
add(T); add(); // 过渡页码
}
}
var prev = $("<a>").append("<"); // 当前页码为1, 不绑定点击事件
if(idx > 1) { // 当前页码大于1时, 绑定点击事件
prev.attr("href", "#page=prev").attr("value",idx-1)
.bind("click", param, go);
}
wrap.prepend(" ").prepend(prev);
var next = $("<a>").append(">"); // 当前页码为最后一页, 不绑定点击事件
if(idx < cnt) { // 当前页码小于最后一页时, 绑定点击事件
next.attr("href", "#page=next").attr("value",idx+1)
.bind("click", param, go);
}
wrap.append(next);
};
$.fn.zhhpaging = function(index, count, callback) { // 分页
return this.each(function(i) {
create.call(this, index, count, callback);
return true;
});
};
})(jQuery);
$(function() {
// 自动分页, class="auto-zhh-paging",
// data-index指定当前页数, data-count指定总页数, data-form指定表单名
$(".auto-zhh-paging").each(function() {
var self = $(this),
index = self.attr("data-index") || 1,
count = self.attr("data-count"),
form = self.attr("data-form");
count && self.zhhpaging(index, count, form);
});
});
/** 分页样式 **/
html .zhh-paging {
height:22px;
}
html .zhh-paging a {
background-color:#FFFFFF;
border:1px solid #BEBEBE;
text-decoration:none;
color:#404040;
}
html .zhh-paging a:hover, html .zhh-paging a.on {
background-color:#4DAD5D;
border:1px solid #4DAD5D;
text-decoration:none;
color:#FFFFFF;
}
html .zhh-paging a, html .zhh-paging i {
float:left; display:inline;
height:20px; line-height:20px;
margin:0 4px; padding:0 5px;
}
html .zhh-paging i {
font-style:normal;
padding:0 4px;
}