分页导航转

代码如下：

text.html

<html>
      <title>测试</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
    <script type="text/javascript" src="pager.js"></script>
    <link rel="stylesheet" type="text/css" href="pager.css">
</head>
    <body>
        <div class="tnt_pagination" id="pager"></div>
                        
        <script type="text/javascript">
             function confirmsearch(page){
              alert(page);
            }
            
           var pager = new Pager("pager",5,18,"confirmsearch");
           pager.pageNavigation();
        </script>
    </body>

pager.js

function Pager(id,current,pagenum,fun){
   this.id=id;
   this.current=current;
   this.pagenum=pagenum;
   this.fun=fun;
   
   this.pageNavigation=function(){
      var low = this.current - (this.current%10)+1;
      var hight = low+9;
      var content="<font color='#0072BC'>共"+this.pagenum+"页 </font>";
        if(this.current >0 && this.current%10==0){
          hight = this.current;
          low = hight-9;
        }
            
        if(low>1){
             var _previous="<a href='#' onclick='" + this.fun + "(" + (low-1) +")'>Prev</a>"; 
        }else{
             var _previous="<span class='disabled_tnt_pagination'>Prev</span>";
        }
        content += _previous;
        
        for(var i=low;i<=hight;i++){
            var urltext;
            if(i==this.current){
              urltext="<span class='active_tnt_link'>" +i+ "</span>";
            }else{
                urltext="<a href='#' onclick='" + this.fun + "(" + i +")'>"+i+"</a>";
            }
            if(this.pagenum<i){
                urltext="<span class='disabled_tnt_pagination'>" +i+ "</span>";
            }
            content += urltext;
        }
        
         if(hight<pagenum){
              var _next="<a href='#' onclick='" + this.fun + "(" + (hight+1) +")'>Next</a>";
         }else{
            var _next="<span class='disabled_tnt_pagination'>Next</span>";
         }
         
         content +=_next;  
         document.getElementById(this.id).innerHTML = content;
      }
}

pager.css

.tnt_pagination {
display:block;
/*text-align:left;*/
/*height:22px;*/
/*line-height:21px;*/
/*clear:both;*/
padding:7px;
padding-top:7px;
padding-bottom:2px;
text-decoration:none;
/*font-family:Arial, Helvetica, sans-serif;*/
font-size:12px;
font-weight:normal;
}
.tnt_pagination a:link, .tnt_pagination a:visited{
padding:7px;
padding-top:2px;
padding-bottom:2px;
border:1px solid #D8D5D5;
margin-left:7px;
text-decoration:none;
background-color:#EDF2DD;
color:#0072bc;
/*width:22px;*/
font-weight:normal;
}
.tnt_pagination a:hover {
background-color:#DDEEFF;
border:1px solid #BBDDFF;
text-decoration:none;
color:#0072BC;
font-weight:normal;
}
.tnt_pagination .active_tnt_link {
padding:7px;
padding-top:2px;
padding-bottom:2px;
border:1px solid #BBDDFF;
margin-left:7px;
text-decoration:none;
background-color:#DDEEFF;
color:#0072BC;
cursor:default;
}
.tnt_pagination .disabled_tnt_pagination {
padding:7px;
padding-top:2px;
padding-bottom:2px;
border:1px solid #C8CCCF;
margin-left:7px;
text-decoration:none;
background-color:#F5F5F5;
color:#D7D7D7;
cursor:default;
}

实际运用中只要定义一个div：

创建一个类对象，将div的id，当前页数和总页数传进去，：

var pager = new Pager("pager",5,18,"confirmsearch");
pager.pageNavigation();

再定义一个function，用于点击数字的时候执行的操作，一般是跳转到该页数：

function confirmsearch(page){
alert(page);
}

posted @ 2009-02-22 17:10 贤阅读(515) 评论(0) 收藏举报

刷新页面返回顶部

分页导航 转

分页导航转