基于jQuery的分页技术-优快云博客

本文介绍了一种使用jQuery技术实现的分页插件，包括jQuery分页代码、CSS样式和后端处理逻辑。该插件能够根据当前页数、总页数及总记录数动态显示分页导航，并支持跳转至指定页。

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

此分页是通过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>