当前位置：首页 > jquery

jquery分页

2026-03-02 13:03:33jquery

jQuery 分页实现方法

分页是 Web 开发中常见的功能，用于将大量数据分割成多个页面显示。使用 jQuery 可以方便地实现分页功能，以下是几种常见的实现方式：

客户端分页

客户端分页适用于数据量较小的情况，所有数据一次性加载到页面，通过 jQuery 控制显示部分内容。

// 假设数据已加载到页面
var itemsPerPage = 10;
var currentPage = 1;

function showPage(page) {
    $('.item').hide();
    $('.item').slice((page-1)*itemsPerPage, page*itemsPerPage).show();
}

$('.pagination a').click(function() {
    currentPage = parseInt($(this).text());
    showPage(currentPage);
});

AJAX 分页

对于大数据量，推荐使用 AJAX 分页，每次只请求当前页的数据。

function loadPage(page) {
    $.ajax({
        url: '/api/data',
        data: {page: page},
        success: function(data) {
            $('#content').html(data.html);
            updatePagination(data.totalPages, page);
        }
    });
}

function updatePagination(totalPages, currentPage) {
    var paginationHtml = '';
    for (var i = 1; i <= totalPages; i++) {
        paginationHtml += '<a href="#" class="'+(i==currentPage?'active':'')+'">'+i+'</a>';
    }
    $('.pagination').html(paginationHtml);
}

使用 jQuery 分页插件

有许多成熟的 jQuery 分页插件可以简化开发：

jQuery Pagination Plugin

$('#pagination').pagination({
 items: 100,
 itemsOnPage: 10,
 onPageClick: function(pageNumber) {
     loadPage(pageNumber);
 }
});

DataTables 插件（适用于表格数据）

$('#table').DataTable({
 "paging": true,
 "pageLength": 25
});

分页样式设计

基本的分页 HTML 结构：

<div class="pagination">
    <a href="#" class="prev">«</a>
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#" class="next">»</a>
</div>

CSS 样式示例：

.pagination {
    display: inline-block;
}
.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
}
.pagination a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {
    background-color: #ddd;
}

响应式分页

对于移动设备，可能需要简化分页显示：

function checkScreenSize() {
    if ($(window).width() < 768) {
        $('.pagination a:not(.prev,.next,.active)').hide();
    } else {
        $('.pagination a').show();
    }
}
$(window).resize(checkScreenSize);

这些方法可以根据具体需求进行组合和调整，实现适合项目的分页功能。

jquery分页