JS分页

  1     //分页
  2             function pagination(id, config) {
  3                 //总的   当前页   
  4                 this.id = id;
  5                 this.total = config.total; //总的数据量
  6                 //当前页  默认0
  7                if(config.curIndex){
  8                    this.curIndex=config.curIndex-1;
  9                }else{
 10                    this.curIndex = 0;
 11                }
 12                 //首页
 13                 this.firstIndex = 0;
 14                 //下一页
 15                 this.nextIndex = 1;
 16                 //末页
 17                 this.endIndex = config.total - 1;                
 18                 //显示页数范围  默认6页
 19                 this.pageRange=6;
 20                 //默认显示条数
 21                 if(config.size){this.size=config.size;}
 22                 else{this.size=20;}                
 23                 //总的页数
 24                 this.pageTotal = Math.ceil(this.total/this.size);
 25                 this.callBack=config.callBack;
 26                 var dsp=document.getElementById(id).style["display"];
 27                 if(this.total<=this.size){
 28                     if(dsp!="none"){document.getElementById(id).style["display"]="none";}
 29                 }else{
 30                     if(dsp!="block"){document.getElementById(id).style["display"]="block";}
 31                     this.init();                    
 32                 }
 33             }
 34             pagination.prototype = {                    
 35                     setPagition:function(t){            
 36                     //    var _d=document,_ele=_d.getElementById(id),_index=t.curIndex;
 37                         var _d=document,id=t.id,_ele=_d.getElementById(id),_index=t.curIndex,pageTotal=t.pageTotal,pageRange=t.pageRange,halfPageRange=pageRange/2;
 38                         _ele.innerHTML=‘‘;        
 39                         
 40                         var _startIndex=0,_endIndex=0,_rL=pageTotal-_startIndex;
 41                         //如果小于分页栏要显示的数目，按照索引显示  total  10  pageRange 6  pageTotal-curIndex<6    pageRange*1.5>total>pageRange
 42                         if(pageTotal<pageRange){
 43                             _startIndex=0;
 44                             _endIndex=pageTotal-1;
 45                         }
 46                         else {
 47                             if(_index<halfPageRange){
 48                                 _startIndex=0;
 49                                 _endIndex=pageRange-1;
 50                             }
 51                             else if(pageTotal-_index<=pageRange){
 52                                 _startIndex=pageTotal-pageRange;
 53                                 _endIndex=pageTotal-1;
 54                             }else{
 55                                 _startIndex=_index-halfPageRange+1;
 56                                 _endIndex=_startIndex+pageRange-1;
 57                             }                            
 58                         }            
 59                         var _spTotal=document.createElement("span");
 60                         _spTotal.innerHTML="共有条"+t.total+"数据"
 61                         _ele.appendChild(_spTotal);
 62                         
 63                         var a=_d.createElement("a");
 64                         a.href="javascript:void(0)";
 65                         a.id=id+"-first";
 66                         a.innerHTML="首页";
 67                         _ele.appendChild(a);
 68                         
 69                         var aPre=a.cloneNode();
 70                         aPre.id=id+"-prev";
 71                         aPre.innerHTML="上一页";                        
 72                         _ele.appendChild(aPre);
 73                         
 74                         for(var i=_startIndex;i<=_endIndex;i++){                
 75                             var aNum=a.cloneNode(),_i=i+1;
 76                             aNum.id=id+"-num-"+_i;
 77                             aNum.innerHTML=_i;
 78                             if(_index==i){
 79                                 aNum.className="On NavNow";//On  NavNow
 80                             }
 81                             _ele.appendChild(aNum);
 82                         }    
 83                         
 84                         var aNext=a.cloneNode();
 85                         aNext.id=id+"-next";
 86                         aNext.innerHTML="下一页";
 87                         _ele.appendChild(aNext);
 88                         
 89                         var aEnd=a.cloneNode();
 90                         aEnd.id=id+"-end";
 91                         aEnd.innerHTML="尾页";
 92                         _ele.appendChild(aEnd);
 93                     },
 94                     init: function() {
 95                         var d = document,_t= this,_boxId=_t.id;
 96                         _t.setPagition(_t);                             
 97                         var _m = d.getElementById(_t.id);
 98                         _m.onclick = function(e) {                        
 99                             //_evt 事件源,_tar 源节点,_tp 点击类型,_curIndex 点击的当前页,_curEle 当前节点,_bCurIndex 点击之前的页面索引,_total=_t.total 数据总数
100                             var _evt,_tar,_tp,_curIndex,_curEle,_bCurIndex,_total=_t.total,_size=_t.size,_pageTotal=Math.ceil(_total/_size),_end=_pageTotal-1;
101                             
102                             //如果只有一页
103                             if(_pageTotal==1){return;}
104                                 _evt = e || window.event;
105                                 _tar = _evt.target||_evt.srcElement;
106                                 
107                                 _tp = _tar.id.split(‘-‘)[1];                         
108                                 _bCurIndex=_t.curIndex;
109                             if (_tp == "prev") {
110                                 //_curIndex  >0    不是第一页，切换页码数字pgSeria的显示 ,  
111                                 if(_bCurIndex>0){                                    
112                                      _curIndex=_bCurIndex-1;
113                                     _t.curIndex=_curIndex;
114                                 }else{
115                                     return false;
116                                 }
117                             } else if (_tp == "next") {
118                                 //不是最后一页
119                                 if(_bCurIndex<_end){                                    
120                                     _curIndex=_bCurIndex+1;
121                                     _t.curIndex=_curIndex;
122                                 }else{
123                                     return false;
124                                 }
125                             } else if (_tp == "first") {
126                                 //当前页不是第一页                                
127                                 if(_bCurIndex!=0){                                    
128                                     _curIndex=0;
129                                     _t.curIndex=_curIndex;
130                                 }else{
131                                     return false;
132                                 }
133                             } else if (_tp == "end") {
134                                 //当前页不是最后一页
135                                 if(_bCurIndex!=_end){                                    
136                                     _curIndex=_end;
137                                     _t.curIndex=_curIndex;
138                                 }else{
139                                     return false; 
140                                 }
141                                 
142                             } else if (_tp == "num") {
143                                 //与点击之前不是同一页
144                                 var _eleTxt=parseFloat(_tar.innerHTML);
145                                   if((_bCurIndex+1)==_eleTxt){return false;}
146                                   else{
147                                       _curIndex=_eleTxt-1;
148                                       _t.curIndex=_curIndex;
149                                   }
150                                   
151                             }
152                             if(typeof(_t.callBack)==‘function‘){
153                                 //alert(_t.curIndex);
154                                 _t.callBack(_t);
155                             }
156                             
157                         }
158                     }
159                 }    

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8">
 6         <title></title>
 7         <script src="js/pagiNation.js"></script>
 8         <style>
 9             .NavNow{background: red;}
10             .PageNav{height: 34px;margin-top: 20px;width: 100%;text-align: center;}
11             .PageNav a{display: inline-block;border: 1px solid #dcdcdc;padding: 0 10px;margin: 0 3px;background-color: #ffffff;}
12             .PageNav a.On{color: #ffffff;border: 1px solid #bc1b21;background-color: #bc1b21;}
13         </style>
14     </head>
15 
16     <body>
17         <div class="NavCtn PageNav" id="pa1"></div>        
18         <script>        
19             //
20             window.onload = function() {
21                     var config = {
22                         total: 627,
23                         size:10,
24                         callBack:function(t){                            
25                         //    getfundnotice();                        
26                             t.setPagition(t);    
27                         }
28                     }
29                     var pa1 = new pagination("pa1", config);                    
30                 }                
31         </script>
32     </body>
33 
34 </html>