分页导航js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页导航示例</title>
    <style>
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .pagination button {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div id="content"></div>
    <div class="pagination">
        <button onclick="prevPage()">上一页</button>
        <span id="pageInfo"></span>
        <button onclick="nextPage()">下一页</button>
    </div>

    <script>
        const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
        let currentPage = 1;
        const itemsPerPage = 10;

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

        function nextPage() {
            if (currentPage < Math.ceil(data.length / itemsPerPage)) {
                currentPage++;
                displayData();
            }
        }

        function prevPage() {
            if (currentPage > 1) {
                currentPage--;
                displayData();
            }
        }

        displayData();
    </script>
</body>
</html>