原生js实现分页效果

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

// 假设有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);