JQuery 分页简洁版
针对分页的逻辑对于我们来说就是页面之间的切换，主要的逻辑就是获取点击的时候的页码数，把相关的数据动态的添加到相应的标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
html,body {
width: 100%;
height: 100%;
}
.out {
width: 97%;
height: 12.5%;
line-height: 4;
text-align: center;
padding-right: 3%;
}
input{
color: rgba(188,188,188,1);
background: #FFFFFF;
border: 1px solid #DCDCDC;
line-height: 2;
width: 6.5%;
}
#first{
color: rgb(252,186,101);
}
#totle{
color: rgb(252,186,101);
}
.content{
width: 100%;
height: 10%;
margin-top: 6%;
position: relative;
}
.content .page{
width: 100%;
height: 40%;
text-align: center;
display: none;
position: absolute;
top:10%;
left:0;
}
.content .page:nth-child(1){
display: block;
}
</style>
</head>
<body>
<div class="content">
<div class="page">
这是第一页
</div>
<div class="page">
这是第二页
</div>
<div class="page">
这是第三页
</div>
<div class="page">
这是第四页
</div>
<div class="page">
这是第五页
</div>
<div class="page">
这是第六页
</div>
</div>
<div class="out">
<input type="button" id="home" value="首页" />
<input type="button" id="last" value="上一页" />
<input type="button" id="first" value="第1页" />
<input type="button" id="next" value="下一页" />
<input type="button" id="end" value="尾页" />
<input type="button" id="totle" value="共5页" />
</div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
//添加点击事件
var $this= $("#first");
var totle = $(".page").length;
$("#home").click(function () {
$this.val("第1页");
$(".page").hide();
$(".page").eq(0).show();
});
$("#end").click(function () {
var b= parseInt($(".page").length);
$this.val('第'+b+'页');
$('.page').hide();
$('.page:eq('+(b-1)+')').show();
});
//总页数
$("#totle").val("共"+parseInt(totle)+"页");
//上一页
$("#last").click(function () {
var now = $("#first").val();
var current = parseInt(now.replace(/[^0-9]/ig,""));
if (current-1<=0){
current = 2;
alert("这已经是第一页了");
}
var a= current-1;
$this.val('第'+a+'页');
$('.page').hide();
$('.page:eq('+(a-1)+')').show();
});
//下一页
$("#next").click(function () {
var now = $("#first").val();
var current = parseInt(now.replace(/[^0-9]/ig,""));
if (current>totle-1){
current = totle-1;
alert("这已经是第一页了");
}
var a= current+1;
$this.val('第'+a+'页');
$('.page').hide();
$('.page:eq('+(a-1)+')').show();
});
</script>
</html>
