使用原生JS实现表格数据的翻页功能

转载自：https://www.cnblogs.com/tengyijun/p/10465811.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://mockjs.com/dist/mock.js"></script>
<style type="text/css">
#pagination {
text-align: center;
}

#table {
width: 800px;
margin: 50px auto;
}

#table th {
height: 35px;
}

#title {
text-align: center;
}

button {
padding: 5px;
box-shadow: 0 0 5px #000;
}
label{
margin-right: 20px;
}
</style>
</head>
<body>
<div id="title">
<h1>表格标题</h1>
</div>
<table id="table" border="1"></table>
<div id="pagination">
<label>共<span id="total"></span>条</label>
<button id="prev">前一页</button>
<span id="pages"></span>
<button id="next">后一页</button>

</div>

//====定义三个全局变量====
//默认设定每页十人
let num1 = 10;
//定义一个变量保存每页真实应该展示的数量
let num2;
//默认展示第一页
let page = 1;

total.innerHTML += `${data.person.length}`

//====定义渲染函数，用于渲染表格数据====
const render = function () {
table.innerHTML =
`<thead>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>地址</th>
</thead>`;
//判断当前选择的页码对应的人数
if (data.person.length - num1 * (page - 1) >= 10) {
num2 = 10;
} else {
num2 = data.person.length - num1 * (page - 1);
}
　　　　　　　//渲染该页对应的数据
for (let i = num1 * (page - 1); i < num2 + num1 * (page - 1); i++) {
table.innerHTML +=
`<tr>
<th>${data.person[i].name}</th>
<th>${data.person[i].gender}</th>
<th>${data.person[i].age}</th>
<th>${data.person[i].phone}</th>
<th>${data.person[i].address}</th>
</tr>`;
}
}
render();
//====根据人数生成页码，将其封装成函数并调用====
const creatPages = function () {
pages.innerHTML = '';
for (let i = 0; i < Math.ceil(data.person.length / 10); i++) {
pages.innerHTML += ` <button data-page="${i+1}">${i+1}</button>`
}
}
creatPages();
//====绑定左右及页码翻页按钮点击事件。每次点击事件后都要调用渲染函数====
//绑定向前翻页事件
prev.onclick = function () {
if (page > 1) {
page--;
render();
} else {
alert('当前为第一页！')
}
}

//绑定向后翻页事件
next.onclick = function () {
if (page < Math.ceil(data.person.length / 10)) {
page++;
render();
} else {
alert('当前为最后一页！')
}
}
//绑定点击页码渲染相应的数据事件
pages.addEventListener('click', function (e) {
page = e.target.getAttribute('data-page');
render();
})
</script>
</body>
</html>

使用原生JS实现表格数据的翻页功能

猜你喜欢