当前位置：首页 > JavaScript

js怎么实现分页效果

2026-01-31 05:11:11JavaScript

实现分页效果的方法

前端分页（纯JavaScript）

使用数组切片实现前端分页，适用于数据量较小的情况。

const data = [/* 原始数据数组 */];
const itemsPerPage = 10;
let currentPage = 1;

function paginate(items, page = 1, perPage = 10) {
    const offset = (page - 1) * perPage;
    return items.slice(offset, offset + perPage);
}

function renderPage() {
    const paginatedData = paginate(data, currentPage, itemsPerPage);
    // 渲染分页数据到DOM
}

function updatePaginationUI() {
    const totalPages = Math.ceil(data.length / itemsPerPage);
    // 更新页码显示和按钮状态
}

后端API分页

与后端配合实现分页，通常使用limit和offset参数。

async function fetchPaginatedData(page, size) {
    const response = await fetch(`/api/data?page=${page}&size=${size}`);
    return await response.json();
}

// 使用示例
fetchPaginatedData(1, 10).then(data => {
    // 处理返回的分页数据
});

完整分页组件实现

创建包含导航按钮的分页组件。

class Pagination {
    constructor({ totalItems, itemsPerPage, currentPage = 1 }) {
        this.totalItems = totalItems;
        this.itemsPerPage = itemsPerPage;
        this.currentPage = currentPage;
        this.totalPages = Math.ceil(totalItems / itemsPerPage);
    }

    nextPage() {
        if (this.currentPage < this.totalPages) {
            this.currentPage++;
            return true;
        }
        return false;
    }

    prevPage() {
        if (this.currentPage > 1) {
            this.currentPage--;
            return true;
        }
        return false;
    }

    goToPage(page) {
        if (page >= 1 && page <= this.totalPages) {
            this.currentPage = page;
            return true;
        }
        return false;
    }
}

分页UI实现示例

结合DOM操作的分页界面实现。

function createPaginationUI(totalPages, currentPage) {
    const pagination = document.createElement('div');
    pagination.className = 'pagination';

    // 上一页按钮
    const prevBtn = document.createElement('button');
    prevBtn.textContent = '上一页';
    prevBtn.disabled = currentPage === 1;
    prevBtn.addEventListener('click', () => {
        if (currentPage > 1) goToPage(currentPage - 1);
    });

    // 页码按钮
    for (let i = 1; i <= totalPages; i++) {
        const pageBtn = document.createElement('button');
        pageBtn.textContent = i;
        pageBtn.className = i === currentPage ? 'active' : '';
        pageBtn.addEventListener('click', () => goToPage(i));
        pagination.appendChild(pageBtn);
    }

    // 下一页按钮
    const nextBtn = document.createElement('button');
    nextBtn.textContent = '下一页';
    nextBtn.disabled = currentPage === totalPages;
    nextBtn.addEventListener('click', () => {
        if (currentPage < totalPages) goToPage(currentPage + 1);
    });

    document.body.appendChild(pagination);
}

无限滚动分页

适用于移动端或需要流畅滚动体验的场景。

let isLoading = false;
let currentPage = 1;

window.addEventListener('scroll', () => {
    if (isLoading) return;

    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
    if (scrollTop + clientHeight >= scrollHeight - 100) {
        isLoading = true;
        currentPage++;
        loadMoreData(currentPage);
    }
});

async function loadMoreData(page) {
    const data = await fetchPaginatedData(page, 10);
    // 追加数据到DOM
    isLoading = false;
}

使用第三方库

推荐使用成熟的库如simple-pagination.js或twbs-pagination。

js怎么实现分页效果

// 使用jQuery分页插件示例
$('#pagination').twbsPagination({
    totalPages: 10,
    visiblePages: 5,
    onPageClick: function(event, page) {
        fetchData(page);
    }
});

这些方法涵盖了从简单到复杂的分页实现方案，可以根据项目需求选择合适的实现方式。前端分页适合少量数据，后端分页适合大数据量，无限滚动适合移动优先的体验，而第三方库可以快速实现标准化分页功能。