使用原生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(); ???????})使用原生JS实现表格数据的翻页功能
原文地址：https://www.cnblogs.com/tengyijun/p/10465811.html