pagination（一个封装好的分页导航）

 

 最近想找一个好看点的分页显示，在国外的一个网站上看到了这样一个分页样式，挺喜欢的，就把它封装成一个可以复用的类

 

代码如下：

text.html

1. < html >
2.        < title > 测试 </ title >
4.      < meta   http-equiv = "pragma"   content = "no-cache" >
5.      < meta   http-equiv = "cache-control"   content = "no-cache" >
6.      < meta   http-equiv = "expires"   content = "0" >
7.      < meta   http-equiv = "Content-Type"   content = "text/html; charset=gb2312" >
8. < head >
9.      < script   type = "text/javascript"   src = "pager.js" > </ script >
10.      < link   rel = "stylesheet"   type = "text/css"   href = "pager.css" >
12. </ head >
14.      < body >
15.          < div   class = "tnt_pagination"   id = "pager" > </ div >
16.                         
17.          < script   type = "text/javascript" >
18.              function confirmsearch(page){
19.               alert(page);
20.             }
21.             
22.            var  pager  =  new  Pager("pager",5,18,"confirmsearch");
23.            pager.pageNavigation();
24.          </ script >
26.      </ body >

pager.js

1. function  Pager(id,current,pagenum,fun){
2.     this .id=id;
3.     this .current=current;
4.     this .pagenum=pagenum;
5.     this .fun=fun;
6.    
7.     this .pageNavigation= function (){
8.        var  low =  this .current - ( this .current%10)+1;
9.        var  hight = low+9;
10.        var  content= "<font color='#0072BC'>共" + this .pagenum+ "页 </font>" ;
12.          if ( this .current >0 &&  this .current%10==0){
13.           hight =  this .current;
14.           low = hight-9;
15.         }
16.             
17.          if (low>1){
18.               var  _previous= "<a href='#' οnclick='"  +  this .fun +  "("  + (low-1) + ")'>Prev</a>" ; 
19.         } else {
20.               var  _previous= "<span class='disabled_tnt_pagination'>Prev</span>" ;
21.         }
22.         content += _previous;
23.         
24.          for ( var  i=low;i<=hight;i++){
25.              var  urltext;
26.              if (i== this .current){
27.               urltext= "<span class='active_tnt_link'>"  +i+  "</span>" ;
28.             } else {
29.                 urltext= "<a href='#' οnclick='"  +  this .fun +  "("  + i + ")'>" +i+ "</a>" ;
30.             }
31.              if ( this .pagenum<i){
32.                 urltext= "<span class='disabled_tnt_pagination'>"  +i+  "</span>" ;
33.             }
34.             content += urltext;
35.         }
36.         
37.           if (hight<pagenum){
38.                var  _next= "<a href='#' οnclick='"  +  this .fun +  "("  + (hight+1) + ")'>Next</a>" ;
39.          } else {
40.              var  _next= "<span class='disabled_tnt_pagination'>Next</span>" ;
41.          }
42.          
43.          content +=_next;  
44.          document.getElementById( this .id).innerHTML = content;
45.       }
46. }

pager.css

1. .tnt_pagination {
2.      display : block ;
3.      /*text-align:left;*/
4.      /*height:22px;*/
5.      /*line-height:21px;*/
6.      /*clear:both;*/
7.    padding : 7px ;
8.      padding-top : 7px ;
9.      padding-bottom : 2px ;
10.      text-decoration : none ;
11.      /*font-family:Arial, Helvetica, sans-serif;*/
12.      font-size : 12px ;
13.      font-weight : normal ;
14. }
16. .tnt_pagination a:link, .tnt_pagination a:visited{
17.      padding : 7px ;
18.      padding-top : 2px ;
19.      padding-bottom : 2px ;
20.      border : 1px   solid   #D8D5D5 ;
21.      margin-left : 7px ;
22.      text-decoration : none ;
23.      background-color : #EDF2DD ;
24.      color : #0072bc ;
25.      /*width:22px;*/
26.      font-weight : normal ;
27. }
29. .tnt_pagination a:hover {
30.      background-color : #DDEEFF ;
31.      border : 1px   solid   #BBDDFF ;
32.      text-decoration : none ;
33.      color : #0072BC ;
34.      font-weight : normal ; 
35. }
37. .tnt_pagination .active_tnt_link {
38.      padding : 7px ;
39.      padding-top : 2px ;
40.      padding-bottom : 2px ;
41.      border : 1px   solid   #BBDDFF ;
42.      margin-left : 7px ;
43.      text-decoration : none ;
44.      background-color : #DDEEFF ;
45.      color : #0072BC ;
46.      cursor : default ;
47. }
49. .tnt_pagination .disabled_tnt_pagination {
50.      padding : 7px ;
51.      padding-top : 2px ;
52.      padding-bottom : 2px ;
53.      border : 1px   solid   #C8CCCF ;
54.      margin-left : 7px ;
55.      text-decoration : none ;
56.      background-color : #F5F5F5 ;
57.      color : #D7D7D7 ;
58.      cursor : default ;
59. }

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

<div class="tnt_pagination" id="pager"></div>

 

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

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

 

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

 

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