分页是Web开发中常见的功能，因为它可以帮助用户更好地浏览大量数据。JS分页是其中的一种实现方式，它通过JavaScript代码对数据进行分页处理，再通过DOM操作将分页后的数据呈现在页面上。
一、实现原理
JS分页的实现原理很简单，主要分为以下几个步骤：
1、获取数据。
const data = [
{name: '张三', age: 25, gender: '男'},
{name: '李四', age: 30, gender: '女'},
{name: '王五', age: 28, gender: '男'},
{name: '赵六', age: 32, gender: '女'},
// ... 更多数据
];
2、计算总页数。
const pageSize = 3; // 每页显示3条数据
const total = data.length; // 数据总条数
const totalPages = Math.ceil(total / pageSize); // 总页数
3、生成分页器。
const pager = document.querySelector('#pager');
for (let i = 1; i <= totalPages; i++) {
const button = document.createElement('button');
button.innerHTML = i;
pager.appendChild(button);
}
4、根据当前页数显示数据。
function showData(pageNo) {
const startIndex = (pageNo - 1) * pageSize;
const endIndex = startIndex + pageSize;
const pageData = data.slice(startIndex, endIndex);
// 根据需求将数据呈现在页面上
}
5、监听分页器按钮的点击事件，更新当前页数并显示对应的数据。
pager.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
const pageNo = parseInt(event.target.innerHTML);
showData(pageNo);
}
});
二、实现方法
我们可以将上述原理，利用函数和对象的封装，封装成JS分页代码。以下是一种常见的实现方法。
function Pagination(selector, options) {
this.container = document.querySelector(selector);
this.current = options.current || 1;
this.pageSize = options.pageSize || 10;
this.total = options.total || 0;
this.totalPages = Math.ceil(this.total / this.pageSize);
this.onPageChange = options.onPageChange || function() {};
this.init = function() {
this.container.innerHTML = '';
const prevButton = document.createElement('button');
prevButton.innerHTML = '上一页';
prevButton.disabled = this.current === 1;
this.container.appendChild(prevButton);
const pager = document.createElement('div');
pager.className = 'pager';
for (let i = 1; i <= this.totalPages; i++) {
const button = document.createElement('button');
button.innerHTML = i;
button.className = i === this.current ? 'active' : '';
pager.appendChild(button);
}
this.container.appendChild(pager);
const nextButton = document.createElement('button');
nextButton.innerHTML = '下一页';
nextButton.disabled = this.current === this.totalPages;
this.container.appendChild(nextButton);
prevButton.addEventListener('click', () => {
if (this.current > 1) {
this.current--;
this.render();
this.onPageChange(this.current);
}
});
nextButton.addEventListener('click', () => {
if (this.current < this.totalPages) {
this.current++;
this.render();
this.onPageChange(this.current);
}
});
pager.addEventListener('click', event => {
if (event.target.tagName === 'BUTTON') {
const pageNo = parseInt(event.target.innerHTML);
if (pageNo !== this.current) {
this.current = pageNo;
this.render();
this.onPageChange(this.current);
}
}
});
};
this.render = function() {
const pager = this.container.querySelector('.pager');
for (let i = 0; i < pager.children.length; i++) {
const button = pager.children[i];
button.className = button.innerHTML === '' + this.current ? 'active' : '';
}
pager.previousElementSibling.disabled = this.current === 1;
pager.nextElementSibling.disabled = this.current === this.totalPages;
};
this.init();
}
// 使用示例：
const pager = new Pagination('#pager', {
current: 1,
pageSize: 3,
total: 10,
onPageChange: pageNo => {
console.log('当前页数为：' + pageNo);
}
});
代码中，我们通过实现一个Pagination对象，将分页的各项操作封装了起来。它接受两个参数，分别是选择器selector和配置对象options。options中包含四个属性，分别是当前页数current、每页数据量pageSize、数据总条数total和分页器按钮被点击时的回调函数onPageChange。Pagination对象同时拥有两个方法，init方法用于生成分页器，render方法用于更新分页器状态。
三、实现效果
最后，我们来看看JS分页的实现效果。以下是一个简单的例子，演示分页器的生成和数据的显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS分页代码实例</title>
<style>
#pager {
display: flex;
align-items: center;
margin-bottom: 20px;
}
button {
margin-right: 5px;
}
button.active {
background-color: #337ab7;
color: white;
}
.data {
display: none;
}
.data.active {
display: block;
}
table {
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="pager"></div>
<div class="data">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script>
const data = [
{name: '张三', age: 25, gender: '男'},
{name: '李四', age: 30, gender: '女'},
{name: '王五', age: 28, gender: '男'},
{name: '赵六', age: 32, gender: '女'},
{name: '钱七', age: 29, gender: '男'},
{name: '孙八', age: 26, gender: '女'},
{name: '周九', age: 31, gender: '男'},
{name: '吴十', age: 27, gender: '女'}
];
const pager = new Pagination('#pager', {
current: 1,
pageSize: 3,
total: data.length,
onPageChange: pageNo => {
showData(pageNo);
}
});
function showData(pageNo) {
const startIndex = (pageNo - 1) * pager.pageSize;
const endIndex = startIndex + pager.pageSize;
const pageData = data.slice(startIndex, endIndex);
const tbody = document.querySelector('.data table tbody');
tbody.innerHTML = '';
for (let i = 0; i < pageData.length; i++) {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
td1.innerHTML = pageData[i].name;
tr.appendChild(td1);
const td2 = document.createElement('td');
td2.innerHTML = pageData[i].age;
tr.appendChild(td2);
const td3 = document.createElement('td');
td3.innerHTML = pageData[i].gender;
tr.appendChild(td3);
tbody.appendChild(tr);
}
document.querySelector('.data').classList.add('active');
}
showData(pager.current);
</script>
</body>
</html>
在浏览器中打开上述代码，即可看到一个实现了数据分页展示的页面。
总结
JS分页是Web开发中常用的数据分页展示方式，它可以帮助用户更好地浏览大量数据。我们可以通过简单的JavaScript代码，实现分页的各项功能，包括数据获取、总页数计算、分页器生成和当前页数据显示等。同时，我们也可以通过对象和函数的封装，将分页的各项功能进行统一封装，并实现可配置的分页器。
