• 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

    效果图 

           

           

  • 相关阅读:
    GitHub里的Hello World!
    4 款消息队列软件产品大比拼(转)
    .net常用组件
    Dapper.NET使用(转)
    设置MYSQL允许用IP访问
    test1
    SQLServer 2008以上误操作数据库恢复方法——日志尾部备份(转)
    Quartz.NET配置
    Quartz CronTrigger配置
    Quartz CronTrigger最完整配置说明
  • 原文地址:https://www.cnblogs.com/dawnheaven/p/4425077.html
Copyright © 2020-2023  润新知