代码改变世界

jquery 分页插件 quickpaginate 基础上修改的，添加具体页码

2012-05-22 17:33  未来上帝  阅读(507)  评论(0)  编辑  收藏  举报
jquery.paginate.js内容如下：
View Code 
  1 // JavaScript Document
  2 (function($){
  3     $.fn.Paginate = function(settings){
  4         settings = jQuery.extend({
  5             oNaver:null,//索引父对象
  6             pageItems:10,//每页显示数目
  7             indexItems:10,//页码数
  8             prev:"cPrev",//class
  9             next:"cNext",//class
 10             showIndex:false,//简洁
 11             showIndexList:false,//具体nav
 12             counter:"cCounter",//class
 13             currentNumber:"cNumber",//class
 14             totalNumber:"cTotalNumber",//class
 15             },settings);
 16         var totalItems;
 17         var point = Math.floor(settings.indexItems/2) ;//页码节点范围，1-5-9
 18         var isfirst = true,islast = false,indexDynamic=false;
 19         var btnNext,btnPrev;
 20         var CurrentPage;//当前页
 21         var items = jQuery(this);
 22         var totalpages;
 23         var init = function(){
 24             items.show();
 25             totalItems = items.size();
 26             totalpages= Math.ceil(totalItems / settings.pageItems);
 27             if(totalpages>settings.indexItems && settings.showIndexList){indexDynamic=true;}
 28             if(totalItems > settings.pageItems){
 29                 items.filter(":gt("+(settings.pageItems-1)+")").hide();
 30                 CurrentPage = 1;
 31                 setNav();
 32             }
 33             
 34         };//init函数结束
 35         
 36         var setNav = function(){
 37             if(settings.oNaver === null){
 38                 settings.oNaver = "<div class='nav'></div>";
 39                 items.eq(items.size()-1).after(settings.oNaver);
 40             }
 41             
 42             var navBar = $('<a class="'+settings.prev+'" href="#">&laquo; 上一页</a><a class="'+settings.next+'" href="#">&laquo; 下一页</a>');
 43             jQuery(settings.oNaver).append(navBar);
 44             
 45             if(settings.showIndex){
 46                 var numBar ='<span class="'+settings.counter+'"><span class="'+settings.currentNumber+'">1</span> / <span class="'+settings.totalNumber+'">'+totalpages+'</span></span>'; 
 47                 settings.oNaver.find("."+settings.prev).after(numBar);
 48             }
 49             
 50             btnNext = settings.oNaver.find("."+settings.next);
 51             btnPrev = settings.oNaver.find("."+settings.prev);
 52             
 53             btnNext.click(function(){
 54                 goNext();
 55                 return;
 56             });
 57             btnPrev.click(function(){
 58                 goPrev();
 59                 return;
 60             });
 61             
 62             if(settings.showIndexList){
 63                 createIndexList();
 64             }
 65         };//setNav结束
 66         
 67         var goJump = function(i){
 68             if(CurrentPage ==i)return;
 69             settings.oNaver.find("."+settings.currentNumber).text(i);
 70             CurrentPage = i;
 71             if(i>point){
 72                 isfirst = false;
 73                 if(i == totalpages){
 74                     islast = true;
 75                 }
 76                 var l =totalItems-(i-1)*settings.pageItems;
 77                 l=l>settings.pageItems?settings.pageItems:l;
 78                 items.hide().slice(((i-1)*settings.pageItems),((i-1)*settings.pageItems+l)).show();
 79                 
 80                 if(indexDynamic){
 81                     var front = i-point;//1
 82                     var bak = i+point;//11
 83                     var endIndex= bak>totalpages?totalpages:bak;//11
 84                     if(endIndex-CurrentPage < point){
 85                         front = totalpages-settings.pageItems;
 86                     }
 87                     controlIndex(front,endIndex);
 88                 }
 89             }
 90             else{
 91                     if(i == 1){
 92                             isfirst = true;
 93                             islast = false;
 94                         }
 95                     var l =totalItems-i*settings.pageItems;
 96                     l=l>settings.pageItems?settings.pageItems:l;
 97                     items.hide().slice((i-1)*settings.pageItems,(i-1)*settings.pageItems+l).show();
 98                     
 99                     if(parseInt(settings.oNaver.find(".n_i_l:first")) == 1)return;
100                     if(indexDynamic){controlIndex(0,settings.indexItems);}
101                     
102                 }
103         };
104         function controlIndex(i,e){
105             settings.oNaver.find(".n_i_l").hide().slice(i,e).show();
106         }
107         var createIndexList = function(){
108             var numIndexList = '';
109             
110             for(var i=1;i<=totalpages;i++){
111                 numIndexList +="<a class='n_i_l'>"+i+"</a>";
112             }
113             settings.oNaver.find("."+settings.totalNumber).after(numIndexList);
114             settings.oNaver.find(".n_i_l").each(function(){
115                 $(this).click(function(){
116                     goJump(parseInt($(this).text()));
117                 });
118                 
119             });
120             if(indexDynamic){
121                 settings.oNaver.find(".n_i_l").slice(settings.indexItems,totalpages).hide();
122             }
123         };
124         var goNext = function()
125         {
126             if ( !islast )
127             {
128                 var cPage = CurrentPage++;
129                 items.hide();
130                 var sumPage = CurrentPage*settings.pageItems;
131                 items.slice( cPage*settings.pageItems, sumPage ).show();
132                 
133                 if ( CurrentPage >= totalpages )
134                 {
135                     islast = true;
136                     btnNext.addClass("btn_disabled");
137                 }
138                 
139                 if ( settings.showIndex ) settings.oNaver.find("."+settings.currentNumber).text(CurrentPage);
140                 
141                 btnPrev.removeClass("btn_disabled");
142                 isfirst = false;
143                 if(indexDynamic){
144                     if(CurrentPage <= point && parseInt(settings.oNaver.find(".n_i_l:first")) != 1){
145                         controlIndex(0,settings.indexItems);
146                     }
147                     else{
148                         var front =CurrentPage-point
149                         var bak = CurrentPage+point;//11
150                         var endIndex= bak>totalpages?totalpages:bak;//11
151                         if(endIndex-CurrentPage < point){
152                             front = totalpages-settings.pageItems;
153                         }
154     
155                             controlIndex(front,endIndex);}
156                 }
157             }
158         };
159     
160         var goPrev = function()
161         {
162             if ( !isfirst )
163             {
164                 var point =5;
165                 var cPage = --CurrentPage;//6
166                 var sumPage = (CurrentPage-1)*settings.pageItems;//5,50
167                 cPage *= settings.pageItems;//6*10
168                 items.hide().slice(sumPage,cPage).show();
169                 if ( CurrentPage == 1  )
170                 {
171                     isfirst = true;
172                     btnPrev.addClass("btn_disabled");
173                 }
174                 
175                 
176                 if ( settings.showIndex ) settings.oNaver.find("."+settings.currentNumber).text(CurrentPage);
177                 btnNext.removeClass("btn_disabled");
178                 islast = false;
179                 if(indexDynamic){
180                     if(CurrentPage <= point && parseInt(settings.oNaver.find(".n_i_l:first")) != 1){
181                         controlIndex(0,settings.indexItems);
182                     }
183                     else{
184                         var front =CurrentPage-point
185                         var bak = CurrentPage+point;//11
186                         var endIndex= bak>totalpages?totalpages:bak;//11
187                         if(endIndex-CurrentPage < point){
188                             front = totalpages-settings.pageItems;
189                         }
190     
191                     controlIndex(front,endIndex);
192                     }
193                 }
194             }
195         };//上一页结束
196     init();
197     };
198 })(jQuery);

结束；

示例html内容：

View Code 
  1 <!doctype html>
  2 <html>
  3 <head>
  4 <base target="_self"></base>
  5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6 <meta name="description" content=" "/>
  7 <title>首页</title>
  8 
  9 <script type="text/javascript" src="js/jquery.min.js"></script>
 10 <script type="text/javascript" src="js/jquery.Paginate.js"></script>
 11 </head>
 12 <body>
 13 <center>
 14 
 15 </div>
 16 <div id="wrapper_content">
 17     <!--左边-->
 18     <div id="l_c" class="center_box">
 19         <ul id="ul1">
 20         <li>1111111111111111111111111111111111</li>
 21         <li>2222222222222222222222222222222222</li>
 22         <li>33333333333333333333333333333333333</li>
 23         <li>4444444444444444444444444444</li>
 24         <li>5555555555555555555555555555</li>
 25         <li>6666666666666666666666666666666</li>
 26         <li>7777777777777777777777777777777</li>
 27         <li>88888888888888888888888888888888</li>
 28         <li>99999999999999999999999999999999999</li>
 29         <li>1010101001011001010110100101010101</li>
 30 
 31         
 32            <li>1111111111111111111111111111111111</li>
 33         <li>2222222222222222222222222222222222</li>
 34         <li>33333333333333333333333333333333333</li>
 35         <li>4444444444444444444444444444</li>
 36         <li>5555555555555555555555555555</li>
 37         <li>6666666666666666666666666666666</li>
 38         <li>7777777777777777777777777777777</li>
 39         <li>88888888888888888888888888888888</li>
 40         <li>99999999999999999999999999999999999</li>
 41         <li>101010100101100101011010010101012</li>
 42 
 43         
 44           <li>1111111111111111111111111111111111</li>
 45         <li>2222222222222222222222222222222222</li>
 46         <li>33333333333333333333333333333333333</li>
 47         <li>4444444444444444444444444444</li>
 48         <li>5555555555555555555555555555</li>
 49         <li>6666666666666666666666666666666</li>
 50         <li>7777777777777777777777777777777</li>
 51         <li>88888888888888888888888888888888</li>
 52         <li>99999999999999999999999999999999999</li>
 53         <li>101010100101100101011010010101013</li>
 54         
 55           <li>1111111111111111111111111111111111</li>
 56         <li>2222222222222222222222222222222222</li>
 57         <li>33333333333333333333333333333333333</li>
 58         <li>4444444444444444444444444444</li>
 59         <li>5555555555555555555555555555</li>
 60         <li>6666666666666666666666666666666</li>
 61         <li>7777777777777777777777777777777</li>
 62         <li>88888888888888888888888888888888</li>
 63         <li>99999999999999999999999999999999999</li>
 64         <li>101010100101100101011010010101014</li>
 65 
 66         
 67            <li>1111111111111111111111111111111111</li>
 68         <li>2222222222222222222222222222222222</li>
 69         <li>33333333333333333333333333333333333</li>
 70         <li>4444444444444444444444444444</li>
 71         <li>5555555555555555555555555555</li>
 72         <li>6666666666666666666666666666666</li>
 73         <li>7777777777777777777777777777777</li>
 74         <li>88888888888888888888888888888888</li>
 75         <li>99999999999999999999999999999999999</li>
 76         <li>101010100101100101011010010101015</li>
 77 
 78         
 79           <li>1111111111111111111111111111111111</li>
 80         <li>2222222222222222222222222222222222</li>
 81         <li>33333333333333333333333333333333333</li>
 82         <li>4444444444444444444444444444</li>
 83         <li>5555555555555555555555555555</li>
 84         <li>6666666666666666666666666666666</li>
 85         <li>7777777777777777777777777777777</li>
 86         <li>88888888888888888888888888888888</li>
 87         <li>99999999999999999999999999999999999</li>
 88         <li>101010100101100101011010010101016</li>
 89 
 90         
 91           <li>1111111111111111111111111111111111</li>
 92         <li>2222222222222222222222222222222222</li>
 93         <li>33333333333333333333333333333333333</li>
 94         <li>4444444444444444444444444444</li>
 95         <li>5555555555555555555555555555</li>
 96         <li>6666666666666666666666666666666</li>
 97         <li>7777777777777777777777777777777</li>
 98         <li>88888888888888888888888888888888</li>
 99         <li>99999999999999999999999999999999999</li>
100         <li>101010100101100101011010010101017</li>
101         
102             <li>1111111111111111111111111111111111</li>
103         <li>2222222222222222222222222222222222</li>
104         <li>33333333333333333333333333333333333</li>
105         <li>4444444444444444444444444444</li>
106         <li>5555555555555555555555555555</li>
107         <li>6666666666666666666666666666666</li>
108         <li>7777777777777777777777777777777</li>
109         <li>88888888888888888888888888888888</li>
110         <li>99999999999999999999999999999999999</li>
111         <li>101010100101100101011010010101018</li>
112  
113         
114          <li>1111111111111111111111111111111111</li>
115         <li>2222222222222222222222222222222222</li>
116         <li>33333333333333333333333333333333333</li>
117         <li>4444444444444444444444444444</li>
118         <li>5555555555555555555555555555</li>
119         <li>6666666666666666666666666666666</li>
120         <li>7777777777777777777777777777777</li>
121         <li>88888888888888888888888888888888</li>
122         <li>99999999999999999999999999999999999</li>
123         <li>101010100101100101011010010101019</li>
124 
125         
126            <li>1111111111111111111111111111111111</li>
127         <li>2222222222222222222222222222222222</li>
128         <li>33333333333333333333333333333333333</li>
129         <li>4444444444444444444444444444</li>
130         <li>5555555555555555555555555555</li>
131         <li>6666666666666666666666666666666</li>
132         <li>7777777777777777777777777777777</li>
133         <li>88888888888888888888888888888888</li>
134         <li>99999999999999999999999999999999999</li>
135         <li>10101010010110010101101001010101010</li>
136         
137           <li>1111111111111111111111111111111111</li>
138         <li>2222222222222222222222222222222222</li>
139         <li>33333333333333333333333333333333333</li>
140         <li>4444444444444444444444444444</li>
141         <li>5555555555555555555555555555</li>
142         <li>6666666666666666666666666666666</li>
143         <li>7777777777777777777777777777777</li>
144         <li>88888888888888888888888888888888</li>
145         <li>99999999999999999999999999999999999</li>
146         <li>1010101001011001010110100101010101-1</li>
147         
148          <li>1111111111111111111111111111111111</li>
149         <li>2222222222222222222222222222222222</li>
150         <li>33333333333333333333333333333333333</li>
151         <li>4444444444444444444444444444</li>
152         <li>5555555555555555555555555555</li>
153         <li>6666666666666666666666666666666</li>
154         <li>7777777777777777777777777777777</li>
155         <li>88888888888888888888888888888888</li>
156         <li>99999999999999999999999999999999999</li>
157         <li>1010101001011001010110100101010101-2</li>
158         
159           <li>1111111111111111111111111111111111</li>
160         <li>2222222222222222222222222222222222</li>
161         <li>33333333333333333333333333333333333</li>
162         <li>4444444444444444444444444444</li>
163         <li>5555555555555555555555555555</li>
164         <li>6666666666666666666666666666666</li>
165         <li>7777777777777777777777777777777</li>
166         <li>88888888888888888888888888888888</li>
167         <li>99999999999999999999999999999999999</li>
168         <li>1010101001011001010110100101010101-3</li>
169         
170         <li>1111111111111111111111111111111111</li>
171         <li>2222222222222222222222222222222222</li>
172         <li>33333333333333333333333333333333333</li>
173         <li>4444444444444444444444444444</li>
174         <li>5555555555555555555555555555</li>
175         <li>6666666666666666666666666666666</li>
176         <li>7777777777777777777777777777777</li>
177         <li>88888888888888888888888888888888</li>
178         <li>99999999999999999999999999999999999</li>
179         <li>1010101001011001010110100101010101-4</li>
180         </ul>
181         <div id="guid1">
182         </div>
183         <script>
184         $(function(){
185             $("#ul1 li").Paginate({ pageItems:10, showIndex:true,showIndexList:true, oNaver:$("#guid1") });
186         });
187         </script>
188     </div>
189     <!--中间-->
190     <div id="c_c" class="center_box">
191         <ul>
192             <li>2222222222222222222222222222222222</li>
193             <li>2222222222222222222222222222222222</li>
194             <li>2222222222222222222222222222222222</li>
195             <li>2222222222222222222222222222222222</li>
196             <li>2222222222222222222222222222222222</li>
197               <li>2222222222222222222222222222222222</li>
198               <li>2222222222222222222222222222222222</li>
199               <li>2222222222222222222222222222222222</li>
200               <li>2222222222222222222222222222222222</li>
201                <li>2222222222222222222222222222222222</li>
202             <li>2222222222222222222222222222222222</li>
203             <li>2222222222222222222222222222222222</li>
204             <li>2222222222222222222222222222222222</li>
205         </ul>
206         <div id="guid2">
207         
208         </div>
209         
210         <script>
211         </script>
212     </div>
213     <!--右边-->
214     <div id="r_c" class="border_box">
215         
216     </div>
217 </div>
218 </center>
219 </body>
220 </html>

 

文件结束。

大家可以直接复制内容！然后自己试试！css没有，可以自己添加，不影响功能演示