码迷,mamicode.com
首页 > Web开发 > 详细

Jquery + Js 实现分页

时间:2015-04-14 16:28:54      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:

网上有很多分页的插件

但是没有自己想要的

 

上代码吧,只有分页部分代码,css 省略了

 

html

技术分享
 1 <div class="bar2 fr" id="pagecontrol"> 
 2                                 <ul>
 3                                     <li><span id="prepage">上一页</span></li>
 4                                     <li class="num current"><a>1</a></li>
 5                                     <li class="num"><a>2</a></li>
 6                                     <li class="num"><a>3</a></li>
 7                                     <li class="num"><a>4</a></li>
 8                                     <li class="num"><a>5</a></li>
 9                                     <li><span id="nextpage">下一页<span></li>
10                                 </ul>
11                             </div>
View Code


js

技术分享
 1 $(function(){
 2         var curpage=1;//当前页码
 3         var maxpage = 10;//最大页码
 4         
 5         if(maxpage > 1)
 6             $("#nextpage").addClass("active");
 7         
 8         $("#rowsToshow").change(function(){
 9             console.log($("#rowsToshow").val());
10         })
11         $("#prepage").live("click",function(){
12             curpage = curpage - 1;
13             pageshow(curpage,maxpage);
14         })
15         $("#nextpage").live("click",function(){
16             curpage = curpage + 1;
17             pageshow(curpage,maxpage);
18         })
19         $("#pagecontrol li a").live("click",function(){
20             curpage = Number($(this).text());
21             pageshow(curpage,maxpage);
22         })
23     })
24     
25     function pageshow(cp,tp){
26         
27         var sp = cp - 2;//startpage
28         var ep = cp + 2;//endpage
29         var eoff = ep - tp;//tp:totalpage
30         if(eoff>0){
31                 sp = sp - eoff;
32         }
33         if(sp<=0){
34             ep = ep -sp + 1;
35         }
36         var str = ‘‘;

37         if(cp != 1)
38             str = str + ‘<ul><li><span id="prepage" class="active">上一页</span></li>‘
39         else
40             str = str + ‘<ul><li><span id="prepage">上一页</span></li>‘
41         for(var i= sp;i<=ep;i++){
42             if(i>0&& i<=tp){
43                 if(i == cp)
44                     str = str + ‘<li class="num current"><a>‘+i+‘</a></li>‘;
45                 else
46                     str = str + ‘<li class="num"><a>‘+i+‘</a></li>‘;
47             }
48         }
49         
50         if(cp != tp)
51             str = str + ‘<li><span class="active" id="nextpage">下一页<span></li></ul>‘;
52         else
53             str = str + ‘<li><span id="nextpage">下一页<span></li></ul>‘;
54         $("#pagecontrol").html(str);
55     }
View Code

效果图 

技术分享

        技术分享

        技术分享

 

Jquery + Js 实现分页

标签:

原文地址:http://www.cnblogs.com/dawnheaven/p/4425077.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!