pagination 分页 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>pagination</title>
  5     <style type="text/css" media="screen">
  6         a{
  7             padding: 5px;
  8             border:1px solid #ddd;
  9             border-radius: 5px;
 10             margin-right: 5px;
 11             cursor: pointer;
 12         }
 13         span{
 14             border: 1px solid #ddd;
 15             display: inline-block;
 16             width: 60px;
 17             height: 20px;
 18             margin-top: 30px;
 19             text-align: center;
 20         }
 21         input{
 22             width: 60px;
 23             text-align: center;
 24             border:1px solid #ddd;
 25             height: 20px;
 26         }
 27     </style>
 28 </head>
 29 <body>
 30     <div id="content"></div>
 31     <span contenteditable="true"></span>
 32     <button id="btn" type="button">跳转</button>
 33     <input type="text">
 34     <button id="btn2" type="button">总页数</button>
 35     <div id="hidden" type="hidden" num="1"></div>
 36     <script src="jquery-1.12.4.min.js"></script>
 37     <script>
 38         function init(pa,p){
 39             var    html = '<a class="pre">上一页</a>';
 40             if(pa<=5){
 41                 for(var i=1;i<=pa;i++){
 42                     html += '<a>'+i+'</a>';
 43                 }
 44             }else{
 45                 if(p+3<pa && p-3>1){
 46                     html += '<a>1</a><a>...</a>';
 47                     for(var i=p-2;i<=p+2;i++){
 48                         html += '<a>'+i+'</a>';
 49                     }
 50                     html += '<a>...</a><a>'+pa+'</a>';
 51                 }
 52                 if(p+3>=pa && p-3>1){
 53                     html += '<a>1</a><a>...</a>';
 54                     for(var i=p-2;i<=pa;i++){
 55                         html += '<a>'+i+'</a>';
 56                     }
 57                 }
 58                 if(p-3<=1 && p>5){
 59                     for(var i=1;i<=p+2;i++){
 60                         html += '<a>'+i+'</a>';
 61                     }
 62                     html += '<a>...</a><a>'+pa+'</a>';
 63                 }
 64                 if(p-3<=1 && p<5){
 65                     for(var i=1;i<=p+2;i++){
 66                         html += '<a>'+i+'</a>';
 67                     }
 68                     html += '<a>...</a><a>'+pa+'</a>';
 69                 }
 70                 html += '<a class="last">下一页</a>'
 71             }
 72             $('#content').html(html);
 73         }
 74         $(function(){
 75             init(30,1);
 76             var time = setInterval(function(){
 77                 $('a:not(a.last):not(a.pre)').on('click',function(){
 78                     var p = Number($(this).text());
 79                     $('#hidden').attr('num',p);
 80                     init(30,p);
 81                 });
 82                 $('#btn').click(function(){
 83                     var p = Number($('span').text());
 84                     var pa = Number($('input').val())!=""?Number($('input').val()):5;
 85                     init(pa,p)
 86                 });
 87                 $('#btn2').click(function(){
 88                     var p = Number($('span').text())!=""?Number($('span').text()):1;
 89                     var pa = Number($('input').val())!=""?Number($('input').val()):5;
 90                     init(pa,p)
 91                 });
 92                 //problem
 93                 // $('.last').click(function(){
 94                 //     var p = $('#hidden').attr('num');
 95                 //     p++;
 96                 //     $('#hidden').attr('num',p);
 97                 //     var pa = Number($('input').val())!=""?Number($('input').val()):30;
 98                 //     console.log(pa,p)
 99                 //     init(pa,p)
100                 // });
101             },400);
102         })
103     </script>
104 </body>
105 </html>

 

posted @ 2016-11-16 15:14  蛋Mrs炒饭  阅读(235)  评论(0)    收藏  举报