准备一个获取数据的接口
–注–：页面可能有点简陋，我们这里主要写如何操作dom来实现分页的功能。
这里我是用node搭建了一个简易的服务器，用来给前端发送数据：
const express = require("express");
const app = express();
// 解决跨域
const cors = require('cors')
app.use(cors());
// 这里是我们的数据
let user = [
{
name:"张三"
},
{
name:"李四"
},
{
name:"王二"
},
{
name:"李五"
},
{
name:"make"
},
{
name:"two"
},
{
name:"three"
},
{
name:"four"
},
{
name:"five"
},
{
name:"six"
},
{
name:"ele"
},
{
name:"poi"
},
{
name:"Yheii"
},
{
name:"Ojjn"
},
{
name:"Pdwd"
},
{
name:"Iuijn"
},
{
name:"Wfaf"
},
{
name:"Ldad"
},
{
name:"IOp"
},
{
name:"NKO"
},
{
name:"1122"
},
{
name:"3344"
},
{
name:'5566'
},
{
name:"7788"
},
{
name:"9900"
},
{
name:"ooop"
},
{
name:"164d"
},
{
name:'164d4w'
},
{
name:"dwad1"
},
{
name:"pkoih"
},
{
name:"ooop"
},
{
name:"164d"
},
{
name:'164d4w'
},
{
name:"dwad1"
},
{
name:"pkoih"
}
]
app.get("/user",(req,res)=>{
console.log("访问呢");
let userList = JSON.stringify(user)
res.send(userList);
})
app.listen(80,()=>{
console.log("run serve http://localhost");
})
接下来就是写我们前端的页面（页面比较简陋）：
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#All {
display: flex;
flex-direction: column;
justify-content: center;
}
#List ul {
display: flex;
flex-direction: column;
align-items: center;
height: 100px;
}
#Page {
display: flex;
align-items: center;
justify-content: center;
}
#Page ul {
display: flex;
}
#Page ul li {
text-align: center;
width: 30px;
}
.active {
background-color: aqua;
}
#Page h5 {
cursor: pointer;
background-color: antiquewhite;
width: 70px;
text-align: center;
border-radius: 5px;
}
#pages li {
cursor: pointer;
border-radius: 5px;
}
</style>
<body>
<div id="All">
<div id="List">
<ul id="user">
</ul>
</div>
<div id="Page">
<h5 id="previousPage">上一页</h5>
<ul id="pages">
</ul>
<h5 id="nextPage">下一页</h5>
</div>
</div>
</body>
效果：
接下来就是我们逻辑的实现（详细看注释）：
// 定义一个全局储存获取到的数据
let data = null;
// 立即执行函数
(function () {
// 获取接口数据
$.ajax({
async: false,
url: "http://localhost/user",
type: "get",
success: function (res) {
let da = JSON.parse(res)
data = da;
},
error: function (err) {
console.log(err);
}
})
// 获取分页
page();
// 开始展示的数据
beginData();
// 当点击不同页码时，刷新数据
changeDate();
// 隐藏页码
hidePage();
// 点击下一页
nextPage();
// 点击上一页
previousPage();
})()
// 获取分页页数
function page() {
let pages = document.getElementById("pages");
// 页码数
let page = data.length / 5;
// 先展示所有的页码数
for (let i = 1; i <= page; i++) {
let li = document.createElement("li")
li.innerHTML = i;
pages.appendChild(li);
}
}
// 只显示4个页码，其余隐藏
function hidePage() {
let pages = document.getElementById("pages");
let chiNode = pages.children;
for (let i = 0; i < chiNode.length; i++) {
// 隐藏超过4个的页码
if (i > 3) {
chiNode[i].style.display = "none";
}
}
}
// 点击下一页时
function nextPage() {
let pages = document.getElementById("pages");
let nextPage = document.getElementById("nextPage");
let chiNode = pages.children;
nextPage.addEventListener("click", function () {
try {
// 显示下一页码
for (let i = chiNode.length - 1; i > 0; i--) {
if (chiNode[i].style.display != "none") {
chiNode[i + 1].style.display = "block";
}
}
// 隐藏开头的页码
for (let i = 0; i < chiNode.length; i++) {
if (chiNode[i].style.display != "none") {
chiNode[i].style.display = "none";
break;
}
}
} catch (error) {
console.log("到底啦");
}
})
}
// 点击上一页时
function previousPage() {
let pages = document.getElementById("pages");
let previousPage = document.getElementById("previousPage");
let chiNode = pages.children;
previousPage.addEventListener("click", function () {
try {
// 显示上一页码
for (let i = 0; i < chiNode.length; i++) {
if (chiNode[i].style.display != "none") {
chiNode[i - 1].style.display = "block";
}
}
// 隐藏结尾数据
for (let i = chiNode.length - 1; i >= 0; i--) {
if (chiNode[i].style.display != "none") {
chiNode[i].style.display = "none";
break;
}
}
} catch (error) {
console.log("到头啦");
}
})
}
// 一开始展示五条数据,并页码1选中
function beginData() {
// 显示前五条数据
let user = document.getElementById("user");
for (let i = 0; i < 5; i++) {
let li = document.createElement("li");
li.innerHTML = data[i].name;
user.appendChild(li);
}
// 选中第一条页码,给他加上active
let pages = document.getElementById("pages");
let li = pages.children;
li[0].classList.add("active");
}
// 当点击不同页数，展现对应数据
function changeDate() {
// 获取页码元素
let pages = document.getElementById("pages");
// 获取列表元素
let user = document.getElementById("user");
let node = pages.children;
for (let i = 0; i < node.length; i++) {
node[i].addEventListener("click", function () {
// 在刷新下一个页面数据的时候，先将之前的数据清楚然后覆盖之前的数据
$("#user").empty();
for (let i = 0; i < node.length; i++) {
node[i].classList.remove("active")
}
node[i].classList.add("active")
let pageNum = Number(node[i].textContent);
// 数据开始的位置索引
let headIndex = (pageNum - 1) * 5;
// 数据结束时的索引
let lastIndex = pageNum * 5;
// 为当前选中页码添加对应数据
for (let i = headIndex; i < lastIndex; i++) {
let li = document.createElement("li");
li.innerHTML = data[i].name;
user.appendChild(li);
}
})
}
}
总体效果演示：
3870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
