使用原生JS实现如下图所示表格数据的翻页功能：
HTML代码：
<body>
<div id="title">
<h1>表格标题</h1>
</div>
<table id="table" border="1"></table>
<div id="pagination">
<button id="prev">《</button>
<span id="pages"></span>
<button id="next">》</button>
</div>
</body>
简单处理一下样式，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;
}
JS部分：
第一步，数据生成，我是用mock.js随机生成的35条数据：
let data = Mock.mock({
"person|35": [{
"name": ‘@cname‘,
"gender": /^[男女]$/,
"age|18-22": 1,
"phone": /^1[\d]{10}$/,
"address": ‘@province‘
}]
})
第二步，获取DOM元素：
const table = document.getElementById(‘table‘);
const prev = document.getElementById(‘prev‘);
const next = document.getElementById(‘next‘);
const pages = document.getElementById(‘pages‘);
第三步，定义三个全局变量。
//默认设定每页十人
let num1 = 10;
//定义一个变量保存每页真实应该展示的数量
let num2;
//默认展示第一页
let page = 1;
第四步，书写并调用渲染函数，用于渲染表格数据
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();
})
原文地址：https://www.cnblogs.com/tengyijun/p/10465811.html
时间： 2024-10-16 06:36:49