当前位置：首页 > jquery

jquery 分页

2026-01-14 15:32:59jquery

实现 jQuery 分页的方法

客户端分页实现

使用 jQuery 实现客户端分页的核心思路是通过 JavaScript 控制数据的显示与隐藏。假设有一个包含数据的 HTML 列表或表格：

// 分页函数
function paginate(pageNumber, itemsPerPage) {
    $('.data-item').hide(); // 隐藏所有项
    $('.data-item').slice((pageNumber - 1) * itemsPerPage, pageNumber * itemsPerPage).show();
}

// 初始化分页
$(document).ready(function() {
    const itemsPerPage = 5;
    const totalItems = $('.data-item').length;
    const totalPages = Math.ceil(totalItems / itemsPerPage);

    // 生成分页按钮
    for (let i = 1; i <= totalPages; i++) {
        $('#pagination').append(`<button class="page-btn">${i}</button>`);
    }

    // 绑定点击事件
    $('.page-btn').click(function() {
        paginate($(this).text(), itemsPerPage);
    });

    // 默认显示第一页
    paginate(1, itemsPerPage);
});

服务器端分页实现

对于大量数据，通常需要结合后端 API 实现服务器端分页。jQuery 通过 AJAX 请求获取分页数据：

function loadPage(pageNumber) {
    $.ajax({
        url: '/api/data',
        data: { page: pageNumber, limit: 10 },
        success: function(response) {
            $('#data-container').empty();
            response.data.forEach(item => {
                $('#data-container').append(`<div>${item.name}</div>`);
            });
            updatePagination(response.totalPages, pageNumber);
        }
    });
}

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

$(document).ready(function() {
    loadPage(1);
    $(document).on('click', '.page-btn', function() {
        loadPage($(this).text());
    });
});

使用分页插件

对于更复杂的需求，可以使用现成的 jQuery 分页插件如 jQuery Pagination 或 DataTables：

jquery 分页

jQuery Pagination 插件：

$('#pagination').pagination({
 items: 100,
 itemsOnPage: 10,
 onPageClick: function(pageNumber) {
     loadPage(pageNumber); // 自定义加载函数
 }
});

DataTables 插件：

jquery 分页

$('#data-table').DataTable({
 paging: true,
 pageLength: 10
});

样式与交互优化

为分页按钮添加基础样式和交互效果：

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

动态数据加载

结合搜索或过滤功能时，动态更新分页：

$('#search-input').keyup(function() {
    const query = $(this).val();
    $.get('/api/search', { q: query }, function(response) {
        renderData(response.data);
        updatePagination(response.totalPages, 1);
    });
});

以上方法涵盖了从简单客户端分页到复杂服务器端分页的实现，可根据项目需求选择适合的方案。