当前位置：首页 > jquery

jquery实现分页

2026-03-16 14:24:25jquery

jQuery 实现分页的方法

前端分页实现

使用 jQuery 实现前端分页，适用于数据量较小的情况。通过 JavaScript 控制数据的显示与隐藏。

// 假设数据已加载到页面
var data = [...]; // 数据数组
var itemsPerPage = 5; // 每页显示数量
var currentPage = 1; // 当前页码

function renderPage(page) {
    var start = (page - 1) * itemsPerPage;
    var end = start + itemsPerPage;
    var pageData = data.slice(start, end);

    $('#data-container').empty();
    $.each(pageData, function(index, item) {
        $('#data-container').append(`<div>${item.name}</div>`);
    });

    renderPagination();
}

function renderPagination() {
    var totalPages = Math.ceil(data.length / itemsPerPage);
    $('#pagination').empty();

    for (var i = 1; i <= totalPages; i++) {
        $('#pagination').append(`<button class="page-btn" data-page="${i}">${i}</button>`);
    }

    $('.page-btn').on('click', function() {
        currentPage = $(this).data('page');
        renderPage(currentPage);
    });
}

// 初始化
renderPage(currentPage);

AJAX 分页实现

对于大数据量，建议使用 AJAX 从服务器动态加载数据。

function loadPage(page) {
    $.ajax({
        url: '/api/data',
        data: { page: page, size: 10 },
        success: function(response) {
            $('#data-container').empty();
            $.each(response.data, function(index, item) {
                $('#data-container').append(`<div>${item.name}</div>`);
            });

            renderPagination(response.total, page);
        }
    });
}

function renderPagination(totalItems, currentPage) {
    var totalPages = Math.ceil(totalItems / 10);
    $('#pagination').empty();

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

    $('.page-btn').on('click', function() {
        loadPage($(this).data('page'));
    });
}

// 初始化
loadPage(1);

分页插件使用

可以使用现成的 jQuery 分页插件如 jQuery Pagination 或 DataTables。

// 使用 jQuery Pagination 插件
$('#pagination').pagination({
    dataSource: '/api/data',
    locator: 'data',
    totalNumber: 100,
    pageSize: 10,
    callback: function(data, pagination) {
        $('#data-container').empty();
        $.each(data, function(index, item) {
            $('#data-container').append(`<div>${item.name}</div>`);
        });
    }
});

CSS 样式建议

为分页按钮添加基本样式，提升用户体验。

jquery实现分页

#pagination {
    margin-top: 20px;
}

.page-btn {
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}

.page-btn.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}