当前位置：首页 > jquery

jquery 翻页

2026-02-03 11:26:47jquery

jQuery 翻页实现方法

基础翻页逻辑

翻页功能通常需要结合后端分页数据和前端交互。以下是一个基于jQuery的简单翻页实现示例：

// 当前页码
var currentPage = 1;

// 翻页按钮点击事件
$('.page-btn').click(function() {
    var page = $(this).data('page');
    loadPage(page);
});

// 加载指定页码内容
function loadPage(page) {
    $.ajax({
        url: '/api/data',
        data: { page: page },
        success: function(response) {
            currentPage = page;
            renderData(response.data);
            updatePagination(response.totalPages);
        }
    });
}

// 更新分页UI
function updatePagination(totalPages) {
    $('.pagination').empty();

    // 上一页按钮
    if(currentPage > 1) {
        $('.pagination').append('<li class="page-item"><a class="page-link" href="#" data-page="'+(currentPage-1)+'">上一页</a></li>');
    }

    // 页码按钮
    for(var i=1; i<=totalPages; i++) {
        var active = i === currentPage ? 'active' : '';
        $('.pagination').append('<li class="page-item '+active+'"><a class="page-link" href="#" data-page="'+i+'">'+i+'</a></li>');
    }

    // 下一页按钮
    if(currentPage < totalPages) {
        $('.pagination').append('<li class="page-item"><a class="page-link" href="#" data-page="'+(currentPage+1)+'">下一页</a></li>');
    }
}

无刷新翻页效果

要实现平滑的翻页过渡效果，可以使用CSS动画配合jQuery：

function renderData(data) {
    $('#content').fadeOut(300, function() {
        $(this).empty();
        // 填充新数据
        $.each(data, function(i, item) {
            $(this).append('<div class="item">'+item.title+'</div>');
        });
        $(this).fadeIn(300);
    });
}

无限滚动翻页

对于移动端或需要更好用户体验的场景，可以实现无限滚动翻页：

var isLoading = false;

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
        if(!isLoading && currentPage < totalPages) {
            isLoading = true;
            loadPage(currentPage + 1);
        }
    }
});

// 在loadPage的success回调中重置标志
isLoading = false;

分页组件集成

如果不想手动实现，可以使用现有的jQuery分页插件：

jquery 翻页

jPaginate：轻量级分页插件
DataTables：功能强大的表格插件自带分页
TWBS Pagination：Bootstrap风格的分页组件

// 使用TWBS Pagination示例
$('.pagination').twbsPagination({
    totalPages: 10,
    visiblePages: 5,
    onPageClick: function(event, page) {
        loadPage(page);
    }
});