js 表格的分页代码怎么写

在JavaScript中实现表格分页功能，通常需要以下几个步骤：

基础概念

分页（Pagination）：将大量数据分成多个页面显示，每个页面显示部分数据。
页码（Page Number）：表示当前显示的是第几页。
每页显示条数（Page Size）：每一页显示的数据条数。

优势

提高用户体验：避免一次性加载大量数据导致页面卡顿。
节省服务器资源：只请求当前页的数据，减少不必要的数据传输。
数据管理更方便：便于对数据进行索引和查找。

类型

前端分页：所有数据一次性加载到前端，然后通过JavaScript进行分页显示。
后端分页：每次只从服务器请求当前页的数据。

应用场景

数据库查询结果展示。
大量数据的列表展示。
后台管理系统中的数据查看。

示例代码（前端分页）

以下是一个简单的前端分页示例，使用纯JavaScript和HTML实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Pagination</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
        .pagination {
            margin-top: 10px;
        }
        .pagination button {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <table id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data will be inserted here -->
        </tbody>
    </table>
    <div class="pagination">
        <!-- Pagination buttons will be inserted here -->
    </div>

    <script>
        const data = [
            { id: 1, name: 'Alice', age: 25 },
            { id: 2, name: 'Bob', age: 30 },
            { id: 3, name: 'Charlie', age: 35 },
            // Add more data as needed
        ];

        const itemsPerPage = 2;
        let currentPage = 1;

        function displayData(page) {
            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const paginatedData = data.slice(start, end);

            const tableBody = document.querySelector('#dataTable tbody');
            tableBody.innerHTML = '';

            paginatedData.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                `;
                tableBody.appendChild(row);
            });
        }

        function setupPagination() {
            const totalPages = Math.ceil(data.length / itemsPerPage);
            const paginationDiv = document.querySelector('.pagination');
            paginationDiv.innerHTML = '';

            for (let i = 1; i <= totalPages; i++) {
                const button = document.createElement('button');
                button.textContent = i;
                button.addEventListener('click', () => {
                    currentPage = i;
                    displayData(currentPage);
                });
                paginationDiv.appendChild(button);
            }
        }

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