写了一个js分页，虽然功能不复杂，不过简单可用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.page_box {
text-align: center;
margin: 30px 0;
}
.page_box a {
width: 12px;
height: 10px;
line-height: 10px;
padding: 2px 10px;
border-radius: 4px;
border: 1px solid #dcdcdc;
text-decoration: none;
color: #666;
text-align: center;
margin: 0 5px;
font-size: 14px;
}
.page_box .page_active {
background-color: #00aaf2;
color: #fff;
border: 1px solid #009ddf;
}
</style>
</head>
<body>
<div class="page_box" id="list_page_new">
<span id="page_pre" style="visibility:hidden;">
<a href="javascript:;">上一页</a>
</span>
<span id="get_list_page"></span>
<span id="page_next"></span>
<span id="last_page" style="display: none;"><a href="javascript:;">尾页</a></span>
<span>至第<input type="number" name="" id="go_page" value="" style="width: 40px;text-align: center;" />页/共<span id="get_total"></span>页</span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
(function() {
get_list()
}())
//first_show_page(总页数,条数)
function first_show_page(total_page, count) {
//清空原列表
$("#get_list_page").empty();
$("#page_next").empty();
$("#list_page_new").hide();
if (total_page > 1) {
$("#list_page_new").show();
$("#get_total").html(total_page)
$("#page_next").append('<a href="javascript:;" data-page="' + total_page +
'">' + '下一页' + '</a>');
if (total_page < 5) {
for (var w = 1; w < total_page + 1; w++) {
$("#get_list_page").append('<a href="javascript:;" data-page="' + w +
'">' + w + '</a>');
}
} else if (total_page > 5 || total_page == 5) {
for (var w1 = 1; w1 < total_page + 1; w1++) {
$("#get_list_page").append('<a href="javascript:;" data-page="' + w1 +
'">' + w1 + '</a>');
}
for (var w1 = 5; w1 < total_page; w1++) {
$("#get_list_page").find("a").eq(Number(w1)).hide();
}
}
$("#get_list_page").find("a").eq(0).addClass("page_active").siblings().removeClass(
"page_active");
}
if (total_page > 5) {
$("#last_page").show();
}
}
// show_page(当前页，总页数)
function show_page(curr, total_page) {
if (curr == 1) {
$("#page_pre").css("visibility", "hidden");
} else {
$("#page_pre").css("visibility", "visible");
}
var arr_show = []
$("#get_list_page").find('a').each(function() {
if ($(this).is(':visible')) {
arr_show.push($(this).attr('data-page'))
}
})
if (curr == total_page || arr_show[5] == total_page) {
$("#page_next").hide();
$("#last_page").hide();
} else {
$("#page_next").show();
$("#last_page").show();
}
}
//切换分页
$("#get_list_page").on("click", "a", function() {
var now_page = $(this).attr('data-page')
get_curr_page(now_page)
$(this).addClass("page_active").siblings().removeClass("page_active")
})
//下一页
$("#page_next").on("click", "a", function() {
var index = ""
$("#get_list_page").find('a').each(function() {
if ($(this).hasClass('page_active')) {
index = $(this).attr('data-page')
}
})
var Number_index1 = Number(index) + 1;
get_curr_page(Number_index1)
if (Number(index) > 4) {
$("#get_list_page").find("a").eq(Number(index)).show();
$("#get_list_page").find("a").eq(Number(index) - 5).hide();
}
$("#get_list_page").find("a").eq(Number(index)).addClass("page_active").siblings().removeClass(
"page_active");
})
//上一页
$("#page_pre").on("click", "a", function() {
var num = ""
var arr_show = []
$("#get_list_page").find('a').each(function() {
if ($(this).hasClass('page_active')) {
num = $(this).attr('data-page')
}
if ($(this).is(':visible')) {
arr_show.push($(this).attr('data-page'))
}
})
num = Number(num)
var Number_num1 = num - 1;
get_curr_page(Number_num1)
if (num == arr_show[0]) {
$("#get_list_page").find("a").eq(num - 2).show();
$("#get_list_page").find("a").eq(num + 3).hide();
} else {
$("#get_list_page").find("a").eq(num - 1).show();
$("#get_list_page").find("a").eq(num + 5).hide();
}
$("#get_list_page").find("a").eq(num - 2).addClass("page_active").siblings().removeClass(
"page_active");
var totalPage = document.getElementById("last_page").dataset.totalPage;
if (Number_num1 == totalPage) {
$("#last_page").hide();
}
})
//尾页
$("#last_page").on("click", function() {
var total_page = document.getElementById("last_page").dataset.totalPage;
total_page = Number(total_page)
get_curr_page(total_page)
for (var w = 1; w < total_page - 5; w++) {
$("#get_list_page").find("a").eq(w - 1).hide();
}
for (var w = total_page - 4; w < total_page + 1; w++) {
$("#get_list_page").find("a").eq(w - 1).show();
}
$("#get_list_page").find("a").eq(total_page - 1).addClass("page_active").siblings().removeClass(
"page_active");
$("#last_page").hide();
})
//跳到第n页
//跳到第n页
$("#go_page").on("change", function() {
var total_page = document.getElementById("last_page").dataset.totalPage;
total_page = Number(total_page)
var now_page = $(this).val();
now_page = Number(now_page)
if(now_page>total_page){
layer.alert("跳转页数，不能大于总页数", {
title: '温馨提示',
icon: 2
});
$(this).val("");
return;
}else{
get_curr_page(now_page)
if ((total_page - now_page) > 4) {
for (var w = 1; w < total_page; w++) {
$("#get_list_page").find("a").eq(w - 1).hide();
}
for (var w = now_page; w < now_page + 5; w++) {
$("#get_list_page").find("a").eq(w - 1).show();
}
for (var w = now_page + 5; w < total_page + 1; w++) {
$("#get_list_page").find("a").eq(w - 1).hide();
}
}
if ((total_page - now_page) < 5) {
for (var w = 1; w < now_page-4; w++) {
$("#get_list_page").find("a").eq(w - 1).hide();
}
for (var w = total_page-4; w < total_page + 1; w++) {
$("#get_list_page").find("a").eq(w - 1).show();
}
}
$("#get_list_page").find("a").eq(now_page - 1).addClass("page_active").siblings().removeClass(
"page_active");
}
})
//首次渲染动态列表
function get_list() {
//接口返回
first_show_page(12, 120) // //first_show_page(总页数,总条数)
document.getElementById("last_page").dataset.totalPage = 12; //总页数
//略
}
//获取当前页
function get_curr_page(curr) {
//接口返回
show_page(curr, 12)
console.log(curr)
//略
}
</script>
</body>
</html>
扫一扫
485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
