基于jQuery的分页技术

此分页是通过jQuery技术实现，展示效果如下：

jQuery代码：

(function($) {
    $.fn.pager = function(options) {
        var opts = $.extend({}, $.fn.pager.defaults, options);

        return this.each(function() {
        	// 清空目标元素
            $(this).empty();
              //添加分页元素
            $(this).append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount),parseInt(options.totalcount), options.buttonClickCallback));
        });
    };

    // 返回分页元素
    function renderpager(pagenumber, pagecount,totalcount, buttonClickCallback) {
    	
    	var $pager = $('<div style="float:right"><span class="page_other">共<label class="totalcount">'+totalcount+'</label>条</span></div>');
    	var $first = $('<span class="page_break">首页</span>');
    	if(pagenumber > 1){
    		$first.addClass("page_break");
    		$first.click(function() { buttonClickCallback(1); });
    	}
    	$pager.append($first);
    	
    	if(pagenumber > 5){
    		var $backMuti = $('<span class="page_break">后至'+(pagenumber-5)+'页</span>');
    		$backMuti.click(function() { buttonClickCallback(pagenumber-5); });
    		$pager.append($backMuti);
    	}
    	
    	if(pagenumber > 1){
    		var $backOne = $('<span class="page_break">上一页</span>');
    		$backOne.click(function() { buttonClickCallback(pagenumber-1); });
    		$pager.append($backOne);
    	}
    	
    	var startPoint = 1;
    	var endPoint = 5;
    	
    	if(pagenumber > 3){
    		startPoint = pagenumber - 2;
    		endPoint = pagenumber + 2;
    	}
    	
    	if(endPoint > pagecount){
    		startPoint = pagecount - 4;
    		endPoint = pagecount;
    	}
    	if(startPoint < 1){
    		startPoint = 1;
    	}
    	
    	for(var page = startPoint;page<=endPoint;page++){
    		var currentSpan;
    		if(page == pagenumber){
    			currentSpan = $('<span class="page_current">'+(page)+'</span>');
    		}else{
    			currentSpan = $('<span class="page_break">'+(page)+'</span>');
    			currentSpan.click(function(){buttonClickCallback(this.firstChild.data);});
    		}
    		$pager.append(currentSpan);
    	}
    	
    	if(pagenumber < pagecount){
    		var $backOne = $('<span class="page_break">下一页</span>');
    		$backOne.click(function() { buttonClickCallback(pagenumber+1); });
    		$pager.append($backOne);
    	}
    	
    	if(pagecount - pagenumber > 5){
    		var $backMuti = $('<span class="page_break">前至'+(pagenumber+5)+'页</span>');
    		$backMuti.click(function() { buttonClickCallback(pagenumber+5); });
    		$pager.append($backMuti);
    	}
    	
    	var $last = $('<span class="page_break" >末页</span>');
    	if(pagenumber < pagecount){
    		$last.addClass("page_break");
    		$last.click(function() { buttonClickCallback(pagecount); });
    	}
    	$pager.append($last);
    	
    	var $totalpage =$('<span class="page_other">第'+pagenumber+'页/共'+pagecount+'页</span>'); 
    	$pager.append($totalpage);

    	//跳转到指定页
    	var $skipPage= $('<span class="page_go"> 跳转到 <input id="toPageText" type="text" size="5" maxlength="10" > 页</span> ');
    	$pager.append($skipPage);
    	var $goPage=$('<span id="goPage" class="page_break">确定</span>');
    	
	    	$goPage.click(function(){
	    		var numberValue = parseInt($("#toPageText").val());
		    	var toPage = isNaN(numberValue)?1: numberValue;  
		    	if(toPage < 1){
		            	toPage = toPage < 1?1: toPage;
	    						buttonClickCallback(toPage);
		            		}else
		        	if(toPage > pagecount){
		            			toPage = toPage > pagecount? pagecount : toPage;
	    						buttonClickCallback(toPage);
		            		}else{
	    						buttonClickCallback(toPage);
		            		}
	    	});
    	$pager.append($goPage);
 
    	return $pager;
    }

  //默认分页数据
   $.fn.pager.defaults = {
        pagenumber: 1,
        pagecount: 1,
        totalcount:0,
        add:false,
        addUrl:""
    };

 })(jQuery);





CSS代码：
div.pager{
	margin-top:10px;
	float:right;
	width:100%;
}
div.pager ul.pages span{
	font-size:10pt;
}

div.pager ul.pages {
display:block;
border:none;
text-transform:uppercase;
font-size:10px;
padding:0;
width:100%;
text-align:right;
}

div.pager ul.pages li {
list-style:none;
float:left;
border:1px solid #ccc;
text-decoration:none;
margin:0 5px 0 0;
padding:5px;
}

div.pager ul.pages li:hover {
border:1px solid #003f7e;
}

div.pager ul.pages li.pgEmpty {
border:1px solid #eee;
color:#eee;
}

div.pager ul.pages li.pgCurrent {
border:1px solid #003f7e;
color:#000;
font-weight:700;
background-color:#eee;
}

.page_current{
	height:25px;
	line-height:25px;
	font-family: ����, Arial, Helvetica, sans-serif;
	font-size:12px;
	padding-left:6px;
	padding-right:6px;
	border:1px solid #FB9504; 
	background:#FFFBDE;
	padding-top:4px;
	padding-bottom:2px;
	color:#07519a;
	text-decoration:none;
	margin-left:6px;
}

.page_break:hover {cursor:pointer}

.page_break{
	height:25px;
	line-height:25px;
	font-family: ����, Arial, Helvetica, sans-serif;
	font-size:12px;
	padding-left:6px;
	padding-right:6px;
	border:1px solid #E1E1E1;
	background:#fff;
	padding-top:4px;
	padding-bottom:2px;
	color:#07519a;
	text-decoration:none;
	margin-left:6px;
}
.page_break:hover{
	padding-left:6px;
	padding-right:6px;
	border:1px solid #FB9504;
	background:#FFFBDE;
}
.page_other{
	font-family: ����, Arial, Helvetica, sans-serif;
	font-size:12px;
	padding-left:2px;
	padding-right:2px;
	border:1px solid #E1E1E1;
	background:#fff;
	padding-top:4px;
	padding-bottom:2px;
	color:#07519a;
	text-decoration:none;
	margin-left:6px;
}

后台代码：

//进入列表页面
	@RequestMapping(value="/list/manage.do",method=RequestMethod.GET)
	public String manageGet(@ModelAttribute("queryModel") BioDayReportModel queryModel, Model model)
	{
		return "list/manage";
	}

 //返回结果
	@RequestMapping(value="/list/manage.do",method=RequestMethod.POST)
	public String managePost(HttpServletRequest request,@ModelAttribute("queryModel") BioDayReportModel queryModel,Model model){
		Pagination pagn = bioDayReportManager.pageQuery(queryModel);
		model.addAttribute("pagn",pagn);
		 return "list/queryResult";
	}
jsp页面：

<div class="pager" totalcount="${pagn.totalCount}" pagecount="${pagn.pageCount}"></div>