js 前端分页

// 前端分页的示例代码

// 数据源，假设我们有100条数据
const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

// 每页显示的数据量
const itemsPerPage = 10;

// 当前页码
let currentPage = 1;

// 获取分页数据的函数
function getPagedData(data, page, itemsPerPage) {
    const startIndex = (page - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return data.slice(startIndex, endIndex);
}

// 显示分页数据的函数
function displayPagedData() {
    const pagedData = getPagedData(data, currentPage, itemsPerPage);
    console.log(`Page ${currentPage}:`, pagedData);
}

// 切换页面的函数
function changePage(page) {
    if (page < 1 || page > Math.ceil(data.length / itemsPerPage)) {
        console.log('Invalid page number');
        return;
    }
    currentPage = page;
    displayPagedData();
}

// 初始化显示第一页数据
displayPagedData();

// 示例：切换到第5页
changePage(5);

// 示例：切换到第10页
changePage(10);

解释说明：

1. 数据源：我们创建了一个包含100个元素的数组 data，用于模拟分页的数据源。
2. 每页显示的数据量：定义了常量 itemsPerPage，表示每页显示的数据条数。
3. 当前页码：定义了变量 currentPage，表示当前显示的页码，默认为第一页。
4. 获取分页数据的函数：getPagedData 函数根据当前页码和每页显示的数据量，从数据源中截取对应范围的数据。
5. 显示分页数据的函数：displayPagedData 函数调用 getPagedData 获取当前页的数据，并将其打印到控制台。
6. 切换页面的函数：changePage 函数用于切换页码，并在切换后重新显示分页数据。它还会检查输入的页码是否有效。
7. 初始化显示：程序启动时会自动显示第一页的数据。
8. 示例：通过调用 changePage 函数，可以切换到指定的页码并查看相应数据。

希望这段代码能帮助你理解如何在前端实现简单的分页功能。