使用原生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(); })