jquery分页插件（简洁、兼容、类似浏览器搜索分页效果）

最新推荐文章于 2024-03-14 11:41:06 发布

原创最新推荐文章于 2024-03-14 11:41:06 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#分页 #插件 #jquery

js/css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种自定义的分页插件实现方法，旨在解决网上下载的分页插件与网站整体风格不符及兼容性不佳的问题。通过简化设计，实现了更好的兼容性和用户体验，测试结果显示在IE8、IE9、火狐、谷歌和360浏览器下均能正常运行，尽管在IE下存在轻微差异，但不影响正常使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始用网上下载的分页插件，效果比较炫，但是不符合网站的整体风格，主要是发现兼容性不怎么好，

有时候都很明显出错不能用了，于是自己写了一个简单的分页插件，效果简单，所以兼容性也比较好。

测试了下IE8,IE9,火狐，谷歌，360浏览器，效果基本正常，ie下按钮有点细微的差异，但不影响使用。

HTML:

<div id="page"></div>

css:

css:
#page{
	font-size: 14px;
	clear: both;
	padding-top: 1.45em;
	white-space: nowrap;
	text-align: left;
}
#page a{
	background-color: white;
	border: 1px solid #E7ECF0;
	display: inline-block;
	height: 22px;
	line-height: 22px;
	margin-right: 5px;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	width: 23px;
}
#pagePre,#pageNext{

}
#page a.pageCurrent{
	font-weight: bold;
	background-color: #268;
}
#page a.hover{
	font-weight: bold;
	background-color: #268;
}

js:

      var pageSize = 10;
	var total = 53;
	var pageNo = 2;
	var pageCount = 6;
	var actionName = 'user_list.action';
	
	
$(function(){
		$("#page").mcPaginate({
			'pageCount':pageCount,
			'href':actionName,
			'pageNo':pageNo,
			'otherParam':{'name':'Jon','age':22}
		});//分页插件
	});

jquery.mcPaginate.js:

(function($) {
	$.fn.extend({
				mcPaginate : function(options) {
					
					var defaults = {
						href:"",
						pageSize : 10,
						pageNo : 1,
						pageCount : 0,
						otherParam:null,
						display:10
					};
					var opts = $.extend(defaults, options);
					//局部变量
					var href = opts.href;
					var pageCount = opts.pageCount;
					var pageSize = opts.pageSize;
					var pageNo = opts.pageNo;
					var otherParam = opts.otherParam;
					var display = opts.display;// 显示多少个 分页连接
					var hrefTemp;
					var $pageDiv = $(this);
					hrefTemp = href + "?pageSize=" + pageSize;
					
					//拼接其他的参数
					if (typeof otherParam != 'undefined' && otherParam != "" && otherParam!= null) {
							hrefTemp = hrefTemp + $.fn.splitOtherParam(otherParam);
					}
					
					if (pageCount <= 1) {
						return;//不用分页
					}

					$pageDiv.append("共" + pageCount + "页");
					// 上一页
					if (pageNo > 1) {
						href = hrefTemp + "&pageNo=" + (pageNo - 1);
						$pageDiv.append("<a href='" + href
								+ "' style='width: 65px;'>" + "上一页" + "</a>");
					};

					//分页区域
					if (pageCount <= display) {
						//总页数 < 显示页数
						for ( var i = 0; i < pageCount; i++) {
							href = hrefTemp + "&pageNo=" + (i + 1);
							if (pageNo == (i + 1)) {// 当前页
								$pageDiv.append("<a href='" + href
										+ "' class='pageCurrent'>" + pageNo
										+ "</a>");
							} else {
								$pageDiv.append("<a href='" + href + "'>"
										+ (i + 1) + "</a>");
							}
							;
						}
						;
					} else {
						var midIndex = 0;
						var firstPageNum = pageNo - midIndex;
						var lastPageNum = pageNo + midIndex - 1;
						
						if (display % 2 == 0) {
							midIndex = display / 2;
						} else {
							midIndex = display / 2 + 1;
						}
						if (firstPageNum < 1) {
							firstPageNum = 1;
						}
						if (lastPageNum < display) {
							lastPageNum = display;
						}
						if (lastPageNum > pageCount) {
							lastPageNum = pageCount;// 超过pageCount
							firstPageNum = pageCount - display + 1;
						}

						for ( var j = firstPageNum; j < lastPageNum + 1; j++) {
							href = hrefTemp + "&pageNo=" + j;
							if (pageNo == j) {// 当前页
								$pageDiv
										.append("<a href='" + href
												+ "' class='pageCurrent'>" + j
												+ "</a>");
							} else {
								$pageDiv.append("<a href='" + href + "'>" + j
										+ "</a>");
							}
							;
						}

					}

					// 下一页
					if (pageNo < pageCount) {
						href = hrefTemp + "&pageNo=" + (pageNo + 1);
						$pageDiv.append("<a href='" + href
								+ "' style='width: 65px;'>" + "下一页" + "</a>");
					}
					;

					/* if(pageCount > display){ */
					$pageDiv
							.append("转到"
									+ "<input type='text' class='goNum' style='width:30px;' name='goNum'>页<input type='button' name='goButton' class='goButton' value='确定'>");
					$(".goButton").click(
							function() {
								var goNum = $(".goNum").val();
								if (goNum != "") {
									window.location.href = hrefTemp
											+ "&pageNo=" + goNum;
								}
							});
					/*}*/

					$("#page a").hover(function() {
						$(this).addClass("hover");
					}, function() {
						$(this).removeClass("hover");
					});

				}
			});

	//把参数拼接成字符串
	$.fn.splitOtherParam = function(obj){
					var temp = "";
					  for ( var p in obj ){ 
						  if ( typeof ( obj [ p ]) == " function " ){ 
							  obj [ p ]() ; 
						  } else { 
							  temp = temp +"&"+p+"="+obj[p];
						  } 
					  } 
					  return temp;
	};
	
	
})(jQuery);

效果：