参考论坛上的分页样式,想给自己网页加上如下样式;
思考制作如此导航样式,
需要后台的参数为:
pageinfo包含curpage,totalpage
导航本身的参数:
autopagenum:导航中间选项个数。
在js中进行导航模块的生成,
然后将导航模块通过追加子节点的方式输出到页面。
在jsp中加入用于接收分页导航的<DIV>
<!-- 分页导航部分 --> <div class="borspan"> <a id="autopbn" href="javascript:;"style="display:none" recordnum="${pageSupport.recCount }" curpage="${pageSupport.currPageNo }" totalpage="${pageSupport.totalPageCount }"></a> </div>
在js中:
//带查询条件的跳转 function jump_to(num){ $("#pageIndex").val(num); $("#queryName").val($("#rqueryName").val()); $("#queryForm").submit(); } (function (){ var $borspan = $(".borspan"); var $autopbn = $("#autopbn"); var recordnum = parseInt($autopbn.attr("recordnum")); var curpage = parseInt($autopbn.attr("curpage")); var totalpage = parseInt($autopbn.attr("totalpage")); //导航标签的个数,只考虑奇数 var pagenavnum = 5; //borspan分页导航栏 getPagenav(); function getPageNumberStr(i,pageIndex) { var $obj = null; if (i == pageIndex){ $obj = $("<strong>"+pageIndex+"</strong>"); }else{ $obj = $("<a href='javascript:jump_to("+i+");'>"+i+"</a>"); } return $obj; } function getPagenav() { //上一页,下一页,跳转节点 var $pageinfo = $("<span>共"+recordnum+"条记录 </span>"); var $prev = $("<a href='javascript:jump_to("+(curpage-1)+");'>«</a>"); var $next = $("<a href='javascript:jump_to("+(curpage+1)+");'>»</a>"); var $custompage = $("<label><input name='custompage' class='px' size='2' title='输入页码,按回车快速跳转' onkeydown='if(event.keyCode==13){jump_to(this.value);}' type='text'><span title='totalpage'>/ "+totalpage+"页</span></label>"); //头部分页信息详情 $borspan.append($pageinfo); //上一页标签 if(curpage>1){ $borspan.append($prev); } //排除1..34567情况;例如pagenavnum:5,totalpage:6 if(totalpage <= pagenavnum+1){ for (var j = 1; j <= totalpage; j++){ $borspan.append(getPageNumberStr( j, curpage)); } }else{ //只考虑pagenavnum为奇数的情况,比如为5 var autopagenum = (pagenavnum+1)/2; //左右两边页码,理论值 var minpage = curpage - (autopagenum - 1);//-1 var maxpage = curpage + (autopagenum - 1);//3 //如果当前项导航块左边>2,并且右边< autopagenum-1 if(minpage > 2 && maxpage < (totalpage-1)){ $borspan.append("<a href='javascript:jump_to(1);'>1..</a>"); for (var j = minpage; j <= maxpage; j++){ $borspan.append(getPageNumberStr( j, curpage)); } $borspan.append("<a href='javascript:jump_to("+totalpage+");'>.."+totalpage+"</a>"); }else if(minpage < 3){//如果当前项导航块左边<=2,全部为eg:12345 ..n for (var j = 1; j <= pagenavnum; j++){ $borspan.append(getPageNumberStr( j, curpage)); } $borspan.append("<a href='javascript:jump_to("+totalpage+");'>.. "+totalpage+"</a>"); }else if(maxpage >= (totalpage-1)){//如果当前项导航块右边> $borspan.append("<a href='javascript:jump_to(1);'>1 ..</a>"); for (var j =(totalpage-pagenavnum+1); j <= totalpage; j++){ $borspan.append(getPageNumberStr( j, curpage)); } } } //下一页标签 if(curpage<totalpage){ $borspan.append($next); } //尾部跳转 $borspan.append($custompage); } }
加上样式
/* 分页导航样式 */ .borspan{ padding: 0; margin: 0; line-height: 26px; } .borspan a,.borspan strong,.borspan label{ display: inline; margin-left: 4px; padding: 5px 8px; height: 26px; border: 1px solid; border-color: #C2D5E3; background-color: #FFF; color: #333; overflow: hidden; text-decoration: none; } .borspan strong{ background-color: #E5EDF2; } .borspan label{ cursor: text; } .borspan label .px{ margin-top: 3px; padding: 0; width: 25px; height: 16px; line-height: 16px; border-color: #848484 #E0E0E0 #E0E0E0 #848484; background: #FFF; }
最后得到的样式如下: