JS新手，通过计数类进行分页

基础概念

在前端开发中，分页是一种常见的技术，用于将大量数据分割成多个较小的部分，以便用户能够更方便地查看和管理。计数类分页是一种基于数据总数的分页方式，通常涉及以下几个关键概念：

总页数：根据数据总数和每页显示的数据条数计算得出。
当前页：用户当前查看的页面。
每页显示条数：每一页上显示的数据条数。
数据总数：所有待分页显示的数据的总条数。

类型

计数类分页通常分为两种类型：

前端分页：所有数据一次性加载到前端，然后通过JavaScript进行分页处理。
后端分页：每次请求只加载当前页的数据，减轻前端负担，适用于大数据量场景。

应用场景

计数类分页广泛应用于各种需要展示大量数据的场景，如：

商品列表
文章列表
用户列表
订单列表

示例代码

以下是一个简单的JavaScript计数类分页示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数类分页示例</title>
</head>
<body>
    <div id="data-container"></div>
    <div id="pagination">
        <button onclick="prevPage()">上一页</button>
        <span id="page-info"></span>
        <button onclick="nextPage()">下一页</button>
    </div>

    <script>
        const data = Array.from({ length: 100 }, (_, i) => `数据${i + 1}`); // 模拟数据
        const itemsPerPage = 10; // 每页显示条数
        let currentPage = 1; // 当前页

        function renderData() {
            const start = (currentPage - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const pageData = data.slice(start, end);
            const container = document.getElementById('data-container');
            container.innerHTML = pageData.map(item => `<p>${item}</p>`).join('');
        }

        function updatePaginationInfo() {
            document.getElementById('page-info').textContent = `第 ${currentPage} 页 / 共 ${Math.ceil(data.length / itemsPerPage)} 页`;
        }

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

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

        renderData();
        updatePaginationInfo();
    </script>
</body>
</html>