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

来源：互联网发布：bl推荐知乎编辑：程序博客网时间：2024/05/25 21:35

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

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

测试了下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;// 超过pageCountfirstPageNum = 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);

效果：

0 0