原生js实现分页效果

原生JavaScript实现分页效果主要涉及以下几个基础概念：

基础概念

DOM操作：通过JavaScript操作HTML文档对象模型，实现页面元素的动态更新。
事件处理：绑定点击事件或其他交互事件，响应用户的操作。
数组处理：对数据进行分页处理，通常需要计算每页显示的数据量和当前页码。

优势

性能优化：减少一次性加载大量数据的压力，提升页面加载速度。
用户体验：用户可以快速浏览和定位到感兴趣的内容，提高交互性。
灵活性：可以根据具体需求自定义分页样式和功能。

类型

前端分页：所有数据一次性加载到前端，通过JavaScript进行分页显示。
后端分页：每次只加载当前页的数据，减轻服务器压力，适用于大数据量场景。

应用场景

新闻列表：展示大量新闻文章时，分页可以让用户更方便地浏览。
商品列表：电商网站中，商品众多时分页能提升用户体验。
论坛帖子：论坛中帖子数量庞大，分页有助于管理和查看。

实现步骤及示例代码

以下是一个简单的前端分页效果实现示例：

HTML结构

<div id="content"></div>
<div id="pagination">
    <button id="prevPage">上一页</button>
    <span id="pageInfo"></span>
    <button id="nextPage">下一页</button>
</div>

JavaScript代码

// 假设有100条模拟数据
const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
const itemsPerPage = 10;
let currentPage = 1;

function displayData(page) {
    const start = (page - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    const pageData = data.slice(start, end);
    document.getElementById('content').innerHTML = pageData.map(item => `<div>${item}</div>`).join('');
    document.getElementById('pageInfo').textContent = `第 ${page} 页 / 共 ${Math.ceil(data.length / itemsPerPage)} 页`;
}

document.getElementById('prevPage').addEventListener('click', () => {
    if (currentPage > 1) {
        currentPage--;
        displayData(currentPage);
    }
});

document.getElementById('nextPage').addEventListener('click', () => {
    if (currentPage < Math.ceil(data.length / itemsPerPage)) {
        currentPage++;
        displayData(currentPage);
    }
});

// 初始显示第一页数据
displayData(currentPage);