使用原生JS实现表格数据的翻页功能
Posted _TENG
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用原生JS实现表格数据的翻页功能相关的知识，希望对你有一定的参考价值。
使用原生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实现表格数据的翻页功能的主要内容，如果未能解决你的问题，请参考以下文章
easyui的datagrid的翻页控件的事件，有没有啥对应的翻页函数，或者翻页控件绑定的函数