基于jQuery的分页技术

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

jQuery代码：
<pre name="code" class="html">(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); </pre>

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>