表格分页js代码

表格分页是一种常见的网页功能，用于将大量数据分成多个页面显示，以提高用户体验和页面加载速度。下面是一个简单的表格分页JavaScript代码示例，结合HTML和CSS来实现基本的分页功能。

基础概念

分页（Pagination）：将数据分成多个部分，每个部分称为一页，用户可以通过翻页来查看不同的数据部分。
页码（Page Number）：表示当前显示的数据页。
每页显示条数（Items per Page）：每一页显示的数据条数。

优势

提高加载速度：只加载当前页的数据，减少初始加载时间。
改善用户体验：用户可以快速找到所需信息，无需滚动长列表。
节省服务器资源：减少一次性传输的数据量，降低服务器负载。

类型

客户端分页：所有数据一次性加载到客户端，然后在前端进行分页处理。
服务器端分页：每次翻页时，向服务器请求当前页的数据。

应用场景

电商网站的产品列表
论坛的帖子列表
管理后台的数据表格

示例代码

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;
            text-align: center;
        }
        .pagination button {
            margin: 0 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">
        <button onclick="prevPage()">Previous</button>
        <span id="pageInfo"></span>
        <button onclick="nextPage()">Next</button>
    </div>

    <script src="pagination.js"></script>
</body>
</html>

JavaScript (pagination.js)

const data = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 },
    { id: 4, name: 'David', age: 40 },
    { id: 5, name: 'Eve', age: 45 },
    { id: 6, name: 'Frank', age: 50 },
    { id: 7, name: 'Grace', age: 55 },
    { id: 8, name: 'Hank', age: 60 },
    { id: 9, name: 'Ivy', age: 65 },
    { id: 10, name: 'Jack', age: 70 }
];

const itemsPerPage = 3;
let currentPage = 1;

function displayData() {
    const start = (currentPage - 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);
    });

    document.getElementById('pageInfo').textContent = `Page ${currentPage} of ${Math.ceil(data.length / itemsPerPage)}`;
}

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

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

// Initial display
displayData();

可能遇到的问题及解决方法

数据加载缓慢：
- 原因：数据量过大，一次性加载所有数据导致页面响应慢。
- 解决方法：使用服务器端分页，每次只请求当前页的数据。

分页按钮失效：
- 原因：分页逻辑错误，导致无法正确跳转到下一页或上一页。
- 解决方法：检查nextPage和prevPage函数中的条件判断，确保页码在合理范围内。
页面显示不正确：
- 原因：数据切片逻辑错误，导致显示的数据不符合预期。
- 解决方法：仔细检查displayData函数中的数据切片逻辑，确保正确计算起始和结束索引。