基于bootstrap的分页小插件
bootstrap的ui
<ul class="pagination ">
<li class="page-item"><a class="page-link " href="# ">上一页</a></li>
<li class="page-item active"><a class="page-link " οnclick="skip(this)" href="# ">1</a></li>
<li class="page-item "><a class="page-link" οnclick="skip(this)" href="# ">2</a></li>
<li class="page-item "><a class="page-link " οnclick="skip(this)" href="# ">3</a></li>
<li class="page-item "><a class="page-link " οnclick="skip(this)" href="# ">4</a></li>
<li class="page-item "><a class="page-link " href="# ">下一页</a></li>
</ul>
下面是jquery代码,实现了 上下翻页
只需要知道总页数(totalPage) 一个页面的容量(capacity) 已经当前页(currentPage)
var currentPage = 0; //其实当前页
var totalPage = 10; //总页数
var capacity = 4; //页面容量是4
var number = 0; //记录渲染次数
var changeNumber = 0; //记录需要几个页面
$(function() {
pageShow();
});
//初始化翻页
function initPagination(begin) {
var pageLink = $(".page-link");
var pageItem = $(".page-item");
//初始化页码以及当前页
for (var i = begin; i < capacity * (number + 1); i++) {
$(pageLink).eq((i % capacity) + 1).html(i + 1);
$(pageItem).eq((i % capacity) + 1).css("display", "block");
if ($(pageItem).eq((i % capacity) + 1).hasClass("active")) {
$(pageItem).eq((i % capacity) + 1).removeClass("active");
}
}
$(pageItem).eq(1).addClass("active");
pageButtonStatus();
}
//判断总页数与上下翻页关系
function pageButtonStatus() {
if (currentPage == 0) {
$(".page-item").eq(0).addClass("disabled");
} else {
if ($(".page-item").eq(0).hasClass("disabled")) {
$(".page-item").eq(0).removeClass("disabled");
}
}
//下一页
if (currentPage < totalPage - 1) {
if ($(".page-item").eq(5).hasClass("disabled")) {
$(".page-item").eq(5).removeClass("disabled");
}
} else {
$(".page-item").eq(5).addClass("disabled");
}
}
//渲染页面
function pageShow() {
initPagination(currentPage);
if (totalPage <= capacity) {
var i = capacity - totalPage;
for (var n = 0; n < i; n++) {
$(".page-item").eq(capacity - n).css("display", "none");
}
} else {
changeNumber = (totalPage % capacity == 0) ? (totalPage / capacity) : Math.ceil(totalPage / capacity);
if (changeNumber - 1 == number) {
var i = capacity - (totalPage % capacity);
for (var n = 0; n < i; n++) {
$(".page-item").eq(capacity - n).css("display", "none");
}
}
}
}
//向上翻页
$(".page-item").eq(0).click(function() {
if (!($(this).hasClass("disabled"))) {
currentPage = currentPage - 1;
console.log(currentPage);
if (currentPage >= number * capacity) {
$(".page-item").eq(currentPage % capacity + 2).removeClass("active");
$(".page-item").eq(currentPage % capacity + 1).addClass("active");
pageButtonStatus();
} else {
number--;
var begin = currentPage - capacity + 1;
initPagination(begin);
//按钮颜色的渲染
$(".page-item").eq((begin % capacity) + 1).removeClass("active");
$(".page-item").eq(currentPage % capacity + 1).addClass("active");
}
}
});
//向下翻页
$(".page-item").eq(5).click(function() {
if (!($(this).hasClass("disabled"))) {
currentPage = currentPage + 1;
if (currentPage < (number + 1) * capacity) {
$(".page-item").eq(currentPage % capacity).removeClass("active");
$(".page-item").eq(currentPage % capacity + 1).addClass("active");
pageButtonStatus();
} else {
number++;
pageShow();
}
}
});
//点击页码翻页
function skip(obj) {
var page = $(obj).html();
$(".page-item").eq((currentPage % capacity) + 1).removeClass("active");
$(".page-item").eq((page - 1) % capacity + 1).addClass("active");
currentPage = page - 1;
pageButtonStatus();
}
转载请注明转载出处,最好获取转载版权,联系email:493116703@qq.com