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>
