js 原生实现列表分页

class App { constructor() { this.arr = [{ name: '小明', age: 8, habby: '篮球' }, { name: '小强', age: 8, habby: '篮球' }, { name: '小张', age: 8, habby: '篮球' }, { name: '小王', age: 8, habby: '篮球' }, { name: '小杨', age: 8, habby: '篮球' }, { name: '小红', age: 8, habby: '篮球' }, { name: '小宋', age: 8, habby: '篮球' }] this.init(); } handle() { } render() { let template = ''; this.arr.map((item, index) => { return template += ` <tr> <td>${item.name}</td> <td>${item.age}</td> <td>${item.habby}</td> </tr> ` }) $('#app').html(template); let tab = document.getElementById('app'), pageContent = document.getElementById('page'); window.onPage = function (f, l) { let pageTemplate = ''; let tabLength = tab.rows.length, onePage = f, showNums = l; onePage = onePage < 1 ? 1 : onePage; let allPage = parseInt(tabLength / showNums) + 1; let sNums = (onePage - 1) * showNums + 1, mNums = onePage * showNums; mNums = mNums > tabLength ? tabLength : mNums; sNums = sNums > tabLength ? tabLength : sNums; for (let a = 1; a <= tabLength; a++) { let showpage = tab.rows[a - 1]; showpage.style.display = a >= sNums && a <= mNums ? 'block' : 'none' } pageTemplate += ` <a href="javascript:void(0);" onClick="onPage(${onePage - 1},${showNums})"><</a> ` for (let i = 1; i <= allPage; i++) { pageTemplate += ` <a href="javascript:void(0);"onClick="onPage(${i},${showNums})">${i}</a> ` } pageTemplate += `<a href="javascript:void(0);"onClick="onPage(${onePage + 1},${showNums})">></a> <span>当前页${onePage};共${allPage}页</span> ` pageContent.innerHTML = pageTemplate; } onPage(1, 2) } init() { this.handle(); this.render() } } new App();