漂亮的分页导航（JQuery插件）

最新推荐文章于 2024-05-10 09:43:17 发布

chengjie177

最新推荐文章于 2024-05-10 09:43:17 发布

阅读量118

点赞数

文章标签： jQuery HTML CSS ViewUI

本文链接：https://blog.csdn.net/chengjie177/article/details/83914438

版权


/**
	 * 分页导航
	 * CSS:
		#pageNav{
			height:30px;
		}
		#pageNav span{
			float: right;
			margin: 0 30px 0 0;
		}
		#pageNav span a{
			display: inline-block;
			margin: 7px 3px 0;
			padding: 3px 7px;
			line-height: 1.231;
			text-decoration: none;
			background-color: #e7f4fd;
			border: 1px solid #D6D6D6;
			vertical-align: middle;
			overflow: hidden;
		}
		#pageNav span strong{
			margin: 8px 3px 0;
			padding: 3px 7px;
			line-height: 1.231;
			text-decoration: none;
			vertical-align: middle;
			overflow: hidden;
		}
		#pageNav span a:hover{
			background-color: #73b2da;
			border-color: #3090bc;
			color: #ffffff;
			text-decoration: none;
		}

	 *HTML:
	 <div id="pageNav">
		<input name="page" type="hidden" value="${pages}" />
		<input name="pageNo" type="hidden" value="${pageNo}" />
		<span>
		</span>
	 </div>
	 *JS:
	 $(function(){
		var pageNum = $("input[name=page]").val();
		var pageNo = $("input[name=pageNo]").val();
		$("#pageNav span").page({
			pageNum:pageNum,
			pageNo:pageNo,
			url:"selectInfo.do",
			param:"p"
		});
	 })
	 */
	$.fn.page = function(options) {
		var defaults = {
			pageNum:"pageNum",//页数
			pageNo:"pageNo",//当前页
			url:"url",//action
			param:"param"//传递到url的参数
		}
		var options = $.extend(defaults, options);
		this.each(function(){
			if(options.pageNo==1) {
				var html = "";
			} else {
				var html = "<a href='" + options.url + "?" + options.param + "=" + (+options.pageNo-1) + "'><<上一页</a>";
			}
			var lastNO = +options.pageNo - 4;
			var nextNO = +options.pageNo + 4;
			switch(true) {
				case lastNO<=0&&nextNO<options.pageNum :
					for (var i=1; i<=+nextNO-1; i++) {
						if(i==options.pageNo) {
							html += "<strong>"+ i +"</strong>";
						} else{
							html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
							"<a href='selectInfo.do?p="+ i +"'>" + i + "</a>";
						}
					}
					html +="...<a href='" + options.url + "?" + options.param + "=" + options.pageNum + "'>" + options.pageNum + "</a>";
					break;
				case lastNO<=0&&nextNO>=options.pageNum :
					for(var i=1; i<=options.pageNum; i++){
						if(i==options.pageNo) {
							html += "<strong>"+ i +"</strong>";
						} else{
							html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
						}
					}
					break;
				case lastNO>0&&nextNO>=options.pageNum :
					html +="<a href='" + options.url + "?" + options.param + "=" + 1 + "'>" + 1 + "</a>...";
					for (var i=+lastNO+2; i<options.pageNo; i++) {
						html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
					}
					html += "<strong>" + options.pageNo + "</strong>";
					for (var i=+options.pageNo+1; i<=options.pageNum; i++) {
						html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
					}
					break;
				case lastNO>0&&nextNO<options.pageNum : 
					html +="<a href='" + options.url + "?" + options.param + "=" + 1 + "'>" + 1 + "</a>...";
					for (var i=+lastNO+2; i<options.pageNo; i++) {
						html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
					}
					html += "<strong>" + options.pageNo + "</strong>";
						for (var i=+options.pageNo+1; i<+nextNO-1; i++){
							html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
						}
					html +="...<a href='" + options.url + "?" + options.param + "=" + options.pageNum + "'>" + options.pageNum + "</a>";
					break;
			}
			if(options.pageNo==options.pageNum) {
				html += "";
			} else {
				html +="<a href='" + options.url + "?" + options.param + "=" + (+options.pageNo+1) + "'>下一页>></a>";
			}
			$(this).empty().append(html);
		});
	};