怎么用js在html里写出分页

要在HTML中使用JavaScript实现分页，可以遵循以下步骤：创建数据源、定义分页逻辑、生成分页按钮、渲染当前页内容。 其中，重点在于如何使用JavaScript实现分页逻辑。以下将详细描述如何通过JavaScript和HTML实现分页功能。

一、创建数据源

首先，需要准备好一个数据源。这个数据源可以是一个数组，数组中的每个元素代表一条数据记录。在实际项目中，这些数据通常会从服务器获取，但在本示例中，我们将使用一个静态数组。

const data = [
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
    "Item 6",
    "Item 7",
    "Item 8",
    "Item 9",
    "Item 10",
    "Item 11",
    "Item 12"
];

二、定义分页逻辑

定义分页逻辑，包括每页显示多少条数据、当前页码、总页数等。

let currentPage = 1;
const itemsPerPage = 5;
const totalPages = Math.ceil(data.length / itemsPerPage);

三、生成分页按钮

生成分页按钮，用于用户点击切换页码。可以动态生成这些按钮，并绑定点击事件。

function generatePagination() {
    const pagination = document.getElementById('pagination');
    pagination.innerHTML = '';
    for (let i = 1; i <= totalPages; i++) {
        const button = document.createElement('button');
        button.innerText = i;
        button.addEventListener('click', () => {
            currentPage = i;
            renderPage();
        });
        pagination.appendChild(button);
    }
}

四、渲染当前页内容

根据当前页码渲染对应的数据项。

function renderPage() {
    const list = document.getElementById('data-list');
    list.innerHTML = '';
    const start = (currentPage - 1) * itemsPerPage;
    const end = Math.min(start + itemsPerPage, data.length);
    for (let i = start; i < end; i++) {
        const item = document.createElement('div');
        item.innerText = data[i];
        list.appendChild(item);
    }
}

五、初始化分页

在页面加载时，调用相应函数初始化分页按钮和第一页内容。

document.addEventListener('DOMContentLoaded', () => {
    generatePagination();
    renderPage();
});

六、完整示例代码

以下是完整的HTML和JavaScript代码示例，展示如何实现分页功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagination Example</title>
    <style>
        #pagination button {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="data-list"></div>
    <div id="pagination"></div>
    <script>
        const data = [
            "Item 1",
            "Item 2",
            "Item 3",
            "Item 4",
            "Item 5",
            "Item 6",
            "Item 7",
            "Item 8",
            "Item 9",
            "Item 10",
            "Item 11",
            "Item 12"
        ];
        let currentPage = 1;
        const itemsPerPage = 5;
        const totalPages = Math.ceil(data.length / itemsPerPage);
        function generatePagination() {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';
            for (let i = 1; i <= totalPages; i++) {
                const button = document.createElement('button');
                button.innerText = i;
                button.addEventListener('click', () => {
                    currentPage = i;
                    renderPage();
                });
                pagination.appendChild(button);
            }
        }
        function renderPage() {
            const list = document.getElementById('data-list');
            list.innerHTML = '';
            const start = (currentPage - 1) * itemsPerPage;
            const end = Math.min(start + itemsPerPage, data.length);
            for (let i = start; i < end; i++) {
                const item = document.createElement('div');
                item.innerText = data[i];
                list.appendChild(item);
            }
        }
        document.addEventListener('DOMContentLoaded', () => {
            generatePagination();
            renderPage();
        });
    </script>
</body>
</html>

七、优化建议

样式优化：可以通过CSS调整按钮和数据项的样式，使其更美观。
数据获取：在实际项目中，数据通常来自服务器，可以使用AJAX或Fetch API动态获取数据。
功能扩展：可以添加上一页、下一页按钮，或者直接输入页码跳转等功能。

通过以上步骤，可以实现一个简单的分页功能。希望这篇文章能帮助你理解如何在HTML中使用JavaScript实现分页。