做个简单的分页导航

     参考论坛上的分页样式，想给自己网页加上如下样式；

 

     思考制作如此导航样式，

需要后台的参数为：

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+"条记录&nbsp;</span>");
		var $prev = $("<a href='javascript:jump_to("+(curpage-1)+");'>&laquo;</a>");
		var	$next = $("<a href='javascript:jump_to("+(curpage+1)+");'>&raquo;</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;
}

 

   最后得到的样式如下：