当前位置：首页 > JavaScript

js实现分页

2026-01-12 12:54:19JavaScript

分页的基本实现思路

在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互，后端负责提供分页数据。

前端分页实现

纯前端分页适用于数据量较小的情况，可以直接在内存中处理数据分页：

// 假设有一个数据数组
const data = [...]; // 你的数据数组
const pageSize = 10; // 每页显示数量
let currentPage = 1; // 当前页码

// 获取当前页数据
function getCurrentPageData() {
    const start = (currentPage - 1) * pageSize;
    const end = start + pageSize;
    return data.slice(start, end);
}

// 渲染分页控件
function renderPagination(totalItems) {
    const totalPages = Math.ceil(totalItems / pageSize);
    let paginationHTML = '';

    for (let i = 1; i <= totalPages; i++) {
        paginationHTML += `<button class="page-btn ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</button>`;
    }

    document.getElementById('pagination').innerHTML = paginationHTML;

    // 添加点击事件
    document.querySelectorAll('.page-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            currentPage = parseInt(btn.dataset.page);
            updatePage();
        });
    });
}

// 更新页面
function updatePage() {
    const pageData = getCurrentPageData();
    // 渲染当前页数据...
    renderPagination(data.length);
}

后端API分页

对于大数据量，应该使用后端分页，前端通过API请求特定页码的数据：

async function fetchPaginatedData(page, pageSize) {
    try {
        const response = await fetch(`/api/data?page=${page}&pageSize=${pageSize}`);
        const result = await response.json();
        return result;
    } catch (error) {
        console.error('Error fetching data:', error);
        return null;
    }
}

// 使用示例
async function loadPage(page) {
    const data = await fetchPaginatedData(page, 10);
    if (data) {
        // 渲染数据...
        renderPagination(data.totalCount);
    }
}

分页UI组件

可以使用现有的UI库快速实现分页，比如使用Bootstrap的分页组件：

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

高级分页功能

对于更复杂的分页需求，可以考虑以下增强功能：

添加页面大小选择器，让用户自定义每页显示数量
实现跳转到指定页码的功能
添加总页数和总记录数显示
实现无限滚动分页（懒加载）

// 页面大小选择器示例
document.getElementById('pageSize').addEventListener('change', (e) => {
    pageSize = parseInt(e.target.value);
    currentPage = 1;
    updatePage();
});

// 跳转功能示例
document.getElementById('goToPage').addEventListener('click', () => {
    const page = parseInt(document.getElementById('pageNumber').value);
    if (page >= 1 && page <= totalPages) {
        currentPage = page;
        updatePage();
    }
});