本文共 9102 字，大约阅读时间需要 30 分钟。

一个js文件(jquery.page.js):

(function($){	alert("我运行了!");	var ms = {		init:function(obj,args){			return (function(){				ms.fillHtml(obj,args);				ms.bindEvent(obj,args);			})();		},		//填充html		fillHtml:function(obj,args){			return (function(){				obj.empty();				//上一页				if(args.current > 1){					obj.append('<a href="javascript:;" class="prevPage">上一页</a>');				}else{					obj.remove('.prevPage');					obj.append('<span class="disabled">上一页</span>');				}				//中间页码				if(args.current != 1 && args.current >= 4 && args.pageCount != 4){					obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');				}				if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){					obj.append('<span>...</span>');				}				var start = args.current -2,end = args.current+2;				if((start > 1 && args.current < 4)||args.current == 1){					end++;				}				if(args.current > args.pageCount-4 && args.current >= args.pageCount){					start--;				}				for (;start <= end; start++) {					if(start <= args.pageCount && start >= 1){						if(start != args.current){							obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');						}else{							obj.append('<span class="current">'+ start +'</span>');						}					}				}				if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){					obj.append('<span>...</span>');				}				if(args.current != args.pageCount && args.current < args.pageCount -2  && args.pageCount != 4){					obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');				}				//下一页				if(args.current < args.pageCount){					obj.append('<a href="javascript:;" class="nextPage">下一页</a>');				}else{					obj.remove('.nextPage');					obj.append('<span class="disabled">下一页</span>');				}			})();		},		//绑定事件		bindEvent:function(obj,args){			return (function(){				obj.on("click","a.tcdNumber",function(){					var current = parseInt($(this).text());					ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});					if(typeof(args.backFn)=="function"){						args.backFn(current);					};					$.ajax({   						type : "get",						url : "/SupplyOfCarsPage",						data : {current:current},						dataType : "json",						success : function(pagelist){							 $("#pageNum").text(pagelist.pageNum);							 $("#pagelisttable").empty();							$.each(pagelist.page, function(){     																$("#pagelisttable").append(									"<tr class='a-hover'>" +				                        "<th>"+					                        "<div class='col-md-3'>"+					                            "<span><span id='start_station'>"+this.start_station+"</span> → <span id='destination_station'>"+this.destination_station+"</span></span>"+					                        "</div>"+				                            "<div class='col-md-4'>"+				                                "<a><span id='car_type'>"+this.car_type+"</span>:车长<span id='car_length'>"+this.car_length+"</span>米 载重<span id='bear_weight'>"+this.bear_weight+"</span>吨</a>"+				                            "</div>"+				                        "</th>"+				                        "<th>"+					                        "<div class='col-md-3'>"+					                        	"<div>订单数:&nbsp;<span id='using_account'>"+this.using_account+"</span></div>"+					                        "</div>"+				                            "<div class='col-md-4'>"+				                                "<div>注册时间:</div><span id='register_time'>"+this.register_time+"</span>"+				                            "</div>"+				                            "<div class='col-md-offset-1 col-md-2'><button class='btn btn-success' type='button'>下单</button></div>"+				                        "</th>"+				                      "</tr>"								 );																							 });							}					}); 									});				//上一页				obj.on("click","a.prevPage",function(){					var current = parseInt(obj.children("span.current").text());					ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});										$.ajax({   						type : "get",						url : "/SupplyOfCarsPage",						data : {current:current-1},						dataType : "json",						success : function(pagelist){							 $("#pageNum").text(pagelist.pageNum);							 $("#pagelisttable").empty();							$.each(pagelist.page, function(){     																$("#pagelisttable").append(									"<tr class='a-hover'>" +				                        "<th>"+					                        "<div class='col-md-3'>"+					                            "<span><span id='start_station'>"+this.start_station+"</span> → <span id='destination_station'>"+this.destination_station+"</span></span>"+					                        "</div>"+				                            "<div class='col-md-4'>"+				                                "<a><span id='car_type'>"+this.car_type+"</span>:车长<span id='car_length'>"+this.car_length+"</span>米 载重<span id='bear_weight'>"+this.bear_weight+"</span>吨</a>"+				                            "</div>"+				                        "</th>"+				                        "<th>"+					                        "<div class='col-md-3'>"+					                        	"<div>订单数:&nbsp;<span id='using_account'>"+this.using_account+"</span></div>"+					                        "</div>"+				                            "<div class='col-md-4'>"+				                                "<div>注册时间:</div><span id='register_time'>"+this.register_time+"</span>"+				                            "</div>"+				                            "<div class='col-md-offset-1 col-md-2'><button class='btn btn-success' type='button'>下单</button></div>"+				                        "</th>"+				                      "</tr>"								 );							 });							}					}); 																				if(typeof(args.backFn)=="function"){						args.backFn(current-1);					};				});				//下一页				obj.on("click","a.nextPage",function(){					var current = parseInt(obj.children("span.current").text());					ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});															$.ajax({   						type : "get",						url : "/SupplyOfCarsPage",						data : {current:current+1},						dataType : "json",						success : function(pagelist){							 $("#pageNum").text(pagelist.pageNum);							 $("#pagelisttable").empty();							$.each(pagelist.page, function(){     																$("#pagelisttable").append(									"<tr class='a-hover'>" +				                        "<th>"+					                        "<div class='col-md-3'>"+					                            "<span><span id='start_station'>"+this.start_station+"</span> → <span id='destination_station'>"+this.destination_station+"</span></span>"+					                        "</div>"+				                            "<div class='col-md-4'>"+				                                "<a><span id='car_type'>"+this.car_type+"</span>:车长<span id='car_length'>"+this.car_length+"</span>米 载重<span id='bear_weight'>"+this.bear_weight+"</span>吨</a>"+				                            "</div>"+				                        "</th>"+				                        "<th>"+					                        "<div class='col-md-3'>"+					                        	"<div>订单数:&nbsp;<span id='using_account'>"+this.using_account+"</span></div>"+					                        "</div>"+				                            "<div class='col-md-4'>"+				                                "<div>注册时间:</div><span id='register_time'>"+this.register_time+"</span>"+				                            "</div>"+				                            "<div class='col-md-offset-1 col-md-2'><button class='btn btn-success' type='button'>下单</button></div>"+				                        "</th>"+				                      "</tr>"								 );																							 });							}					}); 															if(typeof(args.backFn)=="function"){						args.backFn(current+1);					}				});			})();		}	}	$.fn.createPage = function(options){		var args = $.extend({			pageCount : 10,			current : 1,			backFn : function(){}		},options);		ms.init(this,args);	}})(jQuery);

html中的代码:

样式:

<!--分页style-->    <style>        .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;}        .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;	line-height: 25px;	padding: 0 10px;border: 1px solid #ddd;	margin: 0 2px;border-radius: 4px;vertical-align: middle;}        .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}        .tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca;	border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}        .tcdPageCode span.disabled{	display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;	color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}    </style>

js样式:

   <!--分页,调用的是博客第一个js--><script src="js/jquery.page.js"></script><script>    $(".tcdPageCode").createPage({        pageCount:[[${pageList.pages}]],        current:1,        backFn:function(p){            console.log(p);        }    });</script>

html:

<div class="tcdPageCode"></div>

效果图:

总结:该分页代码和pagehelp jar包配合使用很舒服!

转载地址：http://lubhz.baihongyu.com/