<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= device-width, initial-scale = 1.0, user-scalable = no">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script type="text/javascript " src="js/jquery-1.11.3.min.js" ></script>
</head>
<body>
<P>click me</P>
<input class="indexBt" type="button" value="首页">
<input class="lastPage" type="button" value="上一页" onclick="lastPage()">
<span class="moreP">...</span>
<ul class="pages">
<li class="curr">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span class="moreN">...</span>
<input class="nextPage" type="button" value="下一页" onclick="nextPage()">
<input class="finalPage" type="button" value="末页">
</body>
<script >
var total = 38;
var curr = 1;
var range = 2;//正常情况下当前页两边的数据位数
$(document).ready(function(){
$("li").click(function(){
var page = $(this).html();
console.log("target_page:"+page);
});
})
function lastPage() {
if(curr == 1){
alert("第一页");
}else{
curr = curr -1;
$("li").removeClass(curr);
loadPages();
}
}
function nextPage(){
if(parseInt(curr + 1) > total){
console.log("last page");
}else {
$(".pages li").attr("class","");
// 改变页码数字
curr = parseInt(curr + 1);
console.log("target_page:" + curr);
// 修改当前所有页面数据
loadPages();
}
}
function loadPages(){
var start = curr - range;
var end = curr + range;
if(start <=0){
start = 1 ;
end = 5;
}else{
if(end > total){
end = total;
start = total - 4;
}
}
var html = "";
for(var i = start;i<=end;i++){
var pageNum = parseInt(i);
if(curr == pageNum){
html = html + '<li class="curr">'+ pageNum +'</li>';
}else{
html = html + '<li>'+ pageNum +'</li>';
}
}
$(".pages").html(html);
// 修改当前页显示效果
var currIndex = -1;
$(".pages li").each(function(index,ele){
if($(ele).text() == curr){
currIndex = index;
}
});
$(".pages li").eq(currIndex).attr("class","curr");
if(curr ==1){
$(".moreP").hide();
$(".moreN").show();
}else if(curr == total){
$(".moreP").show();
$(".moreN").hide();;
}else{
$(".moreP").show();
$(".moreN").show();
}
console.log(currIndex);
}
$(".indexBt").click(function(){
curr =1;
loadPages();
})
$(".finalPage").click(function(){
curr =total;
loadPages();
})
</script>
</html>
