参考论坛上的分页样式，想给自己网页加上如下样式；
思考制作如此导航样式，
需要后台的参数为：
pageinfo包含curpage，totalpage
导航本身的参数：
autopagenum：导航中间选项个数。
在js中进行导航模块的生成，
然后将导航模块通过追加子节点的方式输出到页面。
在jsp中加入用于接收分页导航的<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 = $(""+pageIndex+""); }else{ $obj = $(""+i+""); } return $obj; } function getPagenav() { //上一页，下一页，跳转节点 var $pageinfo = $("共"+recordnum+"条记录 "); var $prev = $("«"); var $next = $("»"); var $custompage = $(""); //头部分页信息详情 $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("1.."); for (var j = minpage; j <= maxpage; j++){ $borspan.append(getPageNumberStr( j, curpage)); } $borspan.append(".."+totalpage+""); }else if(minpage < 3){//如果当前项导航块左边<=2,全部为eg:12345 ..n for (var j = 1; j <= pagenavnum; j++){ $borspan.append(getPageNumberStr( j, curpage)); } $borspan.append(".. "+totalpage+""); }else if(maxpage >= (totalpage-1)){//如果当前项导航块右边> $borspan.append("1 .."); for (var j =(totalpage-pagenavnum+1); j <= totalpage; j++){ $borspan.append(getPageNumberStr( j, curpage)); } } } //下一页标签 if(curpage
加上样式
/* 分页导航样式 */.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;}
最后得到的样式如下：
