漂亮的分页导航（JQuery插件）
/** * 分页导航 * 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").val();var pageNo = $("input").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",//actionparam:"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) + "'>&lt;&lt;上一页</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) + "'>下一页&gt;&gt;</a>";}$(this).empty().append(html);});};
页:
[1]