Jquery + Js 实现分页

网上有很多分页的插件

但是没有自己想要的

 

上代码吧，只有分页部分代码，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

效果图