buscapersonas jQuery
Los espectáculos se dividen en cuatro situaciones
El número total de páginas es inferior a 5
El número total de páginas es superior a 5 páginas y la página seleccionada actualmente es inferior a 5.
El número total de páginas es mayor que 5, la página seleccionada actualmente es mayor o igual que 5
El número total de páginas es superior a 5 páginas, la página seleccionada actualmente está dentro de las 5 páginas del último número total de páginas
Código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: #eee;
}
.pageNav {
width: 1200px;
margin: 100px auto 0;
cursor: pointer;
}
.pageNav span {
padding: 10px 18px;
font-size: 16px;
color: #999;
border-radius: 3px;
background-color: #fff;
margin: 0 4px;
user-select: none;
}
.pageNav span.cur {
color: #4090ff;
}
.pageNav span:hover {
color: #4090ff;
}
</style>
<body>
<div class="pageNav" id="pageNav">
<span class="preve page" id="preve">上一页</span>
<span class="next page" id="next">下一页</span>
</div>
<script src="js/jquery.min.js"></script>
<script>
function Pager(totalPage) {
//总页数
this.totalPage = totalPage;
//当前页数
this.currentPage = 1;
//根节点
this.$dom = $("#pageNav");
//上一页
this.$preve = $("#preve");
//下一页
this.$next = $("#next");
//显示分页
this.pageTo();
var self = this;
$(".num").eq(0).addClass(".cur");
//设置代理点击
this.$dom.delegate(".num", "click", function () {
self.currentPage = Number($(this).html());
console.log(self.currentPage)
$(".num").remove();
$(".point").remove();
self.pageTo()
});
//上一页点击
this.$preve.click(function () {
if (self.currentPage <= 1) {
return;
}
self.currentPage--;
$(".num").remove();
$(".point").remove();
self.pageTo()
})
//下一页点击
this.$next.click(function () {
if (self.currentPage >= self.totalPage) {
return;
}
self.currentPage++;
$(".num").remove();
$(".point").remove();
self.pageTo()
})
}
Pager.prototype.pageTo = function () {
if (this.totalPage <= 5) {
//总页数小于五
for (var i = this.totalPage; i >= 1; i--) {
$("<span class='num'>" + i + "</span>").prependTo(this.$dom);
}
$(".num").eq(this.currentPage - 1).addClass("cur").siblings().removeClass("cur");
} else if (this.totalPage > 5 && this.currentPage < 5) {
console.log(this.currentPage);
//如果总页数大于五，且选中页数小于5
$("<span class='point'>...</span>").prependTo(this.$dom);
for (var i = 5; i >= 1; i--) {
$("<span class='num'>" + i + "</span>").prependTo(this.$dom);
}
$(".num").eq(this.currentPage - 1).addClass("cur").siblings().removeClass("cur");
} else if ((this.totalPage >= 5 && this.currentPage >= 5) && (this.currentPage < this.totalPage - 3)) {
//总页数大于等于5 选中页数大于等于5 且 选中页数小于总页数-3
$("<span class='num'>" + this.totalPage + "</span>").prependTo(this.$dom);
$("<span class='point'>...</span>").prependTo(this.$dom);
for (var i = this.currentPage + 2; i >= this.currentPage - 2; i--) {
$("<span class='num'>" + i + "</span>").prependTo(this.$dom);
}
$(".num").eq(2).addClass("cur").siblings().removeClass("cur");
$("<span class='point'>...</span>").prependTo(this.$dom);
$("<span class='num'>1</span>").prependTo(this.$dom);
} else if ((this.totalPage >= 5 && this.currentPage >= 5) && (this.currentPage >= this.totalPage - 3)) {
//总页数大于等于5，选中页数大于等于5，且 选中页数大于等于总页数-3
for (var i = this.totalPage; i >= this.totalPage - 4; i--) {
$("<span class='num'>" + i + "</span>").prependTo(this.$dom);
}
$("<span class='point'>...</span>").prependTo(this.$dom);
$("<span class='num'>1</span>").prependTo(this.$dom);
$(".num").eq(this.currentPage - this.totalPage - 1).addClass("cur").siblings().removeClass("cur");
}
}
</script>
</body>
</html>