<!DOCTYPE html>
<html>
<head>
<title>pagination</title>
<style type="text/css" media="screen">
a{
padding: 5px;
border:1px solid #ddd;
border-radius: 5px;
margin-right: 5px;
cursor: pointer;
}
span{
border: 1px solid #ddd;
display: inline-block;
width: 60px;
height: 20px;
margin-top: 30px;
text-align: center;
}
input{
width: 60px;
text-align: center;
border:1px solid #ddd;
height: 20px;
}
</style>
</head>
<body>
<div id="content"></div>
<span contenteditable="true"></span>
<button id="btn" type="button">跳转</button>
<input type="text">
<button id="btn2" type="button">总页数</button>
<div id="hidden" type="hidden" num="1"></div>
<script src="jquery-1.12.4.min.js"></script>
<script>
function init(pa,p){
var html = '<a class="pre">上一页</a>';
if(pa<=5){
for(var i=1;i<=pa;i++){
html += '<a>'+i+'</a>';
}
}else{
if(p+3<pa && p-3>1){
html += '<a>1</a><a>...</a>';
for(var i=p-2;i<=p+2;i++){
html += '<a>'+i+'</a>';
}
html += '<a>...</a><a>'+pa+'</a>';
}
if(p+3>=pa && p-3>1){
html += '<a>1</a><a>...</a>';
for(var i=p-2;i<=pa;i++){
html += '<a>'+i+'</a>';
}
}
if(p-3<=1 && p>5){
for(var i=1;i<=p+2;i++){
html += '<a>'+i+'</a>';
}
html += '<a>...</a><a>'+pa+'</a>';
}
if(p-3<=1 && p<5){
for(var i=1;i<=p+2;i++){
html += '<a>'+i+'</a>';
}
html += '<a>...</a><a>'+pa+'</a>';
}
html += '<a class="last">下一页</a>'
}
$('#content').html(html);
}
$(function(){
init(30,1);
var time = setInterval(function(){
$('a:not(a.last):not(a.pre)').on('click',function(){
var p = Number($(this).text());
$('#hidden').attr('num',p);
init(30,p);
});
$('#btn').click(function(){
var p = Number($('span').text());
var pa = Number($('input').val())!=""?Number($('input').val()):5;
init(pa,p)
});
$('#btn2').click(function(){
var p = Number($('span').text())!=""?Number($('span').text()):1;
var pa = Number($('input').val())!=""?Number($('input').val()):5;
init(pa,p)
});
//problem
// $('.last').click(function(){
// var p = $('#hidden').attr('num');
// p++;
// $('#hidden').attr('num',p);
// var pa = Number($('input').val())!=""?Number($('input').val()):30;
// console.log(pa,p)
// init(pa,p)
// });
},400);
})
</script>
</body>
</html>
