jQuery分页插件

少于10页

少于10页

大于10页就会出现省略号,原则是中间5页,左侧固定1页,右侧固定1页,如果省略号只省略了1页,则不显示省略号

总页数=10

总页数=20

大于100页就不会显示总页数了,因为我觉得没必要,哈哈哈

总页数=120

/*!
 * -------------------------------------------------------------
 * 分页插件, 生成分页页码, 并负责点击事件的处理
 * -------------------------------------------------------------
 * 必须的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;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值