一直以来有许多兄弟问我分页怎么写，我今天就来给大家讲解下分页的简单技巧，不过兄弟们也知道我不怎么喜欢打字，喜欢打代码，话不多说，直接上代码，直接上注释，gogogo！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/jquery-3.7.1.js"></script>
<style>
.data_content {
width: 60%;
margin-left: 20%;
display: flex;
flex-direction: column;
align-items: center;
background-color: antiquewhite;
}
.content_box {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
width: 80%;
display: flex;
justify-content: space-around;
}
.but_page {
display: flex;
justify-content: center;
margin-top: 20px;
}
.but_page button {
padding: 8px 16px;
margin: 0 5px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
.but_page button:hover {
background-color: royalblue;
}
.twig {
line-height: 35px;
margin-left: 10px;
}
.page_datas {
margin-left: 500px;
margin-top: 15px;
}
.seek_box {
text-align: center;
margin-bottom: 30px;
}
</style>
</head>
<body>
<!-- 搜索框 -->
<div class="seek_box">
<input type="text" />
<button>搜索</button>
</div>
<!-- 存放数据 -->
<div class="data_content"></div>
<!-- 底部页码 -->
<div class="but_page"></div>
<!-- 页码跳转和每页数据 -->
<div class="page_datas">
<input type="number" class="href_but" />
<button onclick="buts(-3)">跳转</button>
<select name="" class="per_page">
<option value="10">每页10条数据</option>
<option value="5">每页5条数据</option>
<option value="15">每页15条数据</option>
</select>
</div>
<script>
//全局变量
let data;
let num = 10; //每页数据
let k = 0; //第几页
let k_all; //一共多少页
// 请求假数据
$.ajax({
type: "GET",
url: "js/new_file.json",
success: function(res) {
data = res;
console.log(data);
applyColours(0)
},
});
// 渲染函数
function applyColours(dat) {
k = dat;
if (k <= 0) {
k = 0;
} else if (k >= k_all) {
k = k_all - 1;
}
k_all = Math.ceil(data.length / num); //获取到总共多少页
//渲染内容
let str = '';
for (let i = k * num; i < (k + 1) * num; i++) {
if (data[i] == undefined) {
break;
}
str += `
<div class="content_box">
<div>${data[i].id}</div>
<div>${data[i].name}</div>
<div>${data[i].gender}</div>
<div>${data[i].content}</div>
<div>${data[i].age}</div>
</div>`;
}
$('.data_content').html(str);
//渲染按钮
let std = ``;
std += `<button onclick="buts(-1)">上一页</button>`
for (let i = 0; i < k_all; i++) {
std += `<button onclick="buts(${i})">${i+1}</button>`
}
std += `<button onclick="buts(-2)">下一页</button>`
std += `<div class="twig">共${data.length}条</div>`
std += `<div class="twig">共${k_all}页</div>`
std += `<div class="twig">当前第${k+1}页</div>`
$('.but_page').html(std);
$(".but_page button").eq(k + 1).css("background-color", "aquamarine")
}
// 点击按钮事件
function buts(datas) {
if (datas == -1) {
applyColours(k - 1);
} else if (datas == -2) {
applyColours(k + 1);
} else if (datas == -3) {
let number_value = $('.href_but').val();
console.log(number_value);
applyColours(number_value - 1);
} else {
applyColours(datas)
}
}
// 每页多少条数据
$('.per_page').on('change', function() {
let datas_value = $(this).val();
console.log(datas_value);
num = datas_value;
applyColours(0);
});
</script>
</body>
</html>