当前位置：首页 > jquery

jquery 分页

2026-03-02 13:02:08jquery

jQuery 分页实现方法

使用 jQuery 实现分页功能通常需要结合后端数据或前端静态数据。以下是几种常见的实现方式：

前端静态数据分页

// 假设有一个数据数组
var data = [/* 你的数据数组 */];
var currentPage = 1;
var itemsPerPage = 10;

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

    // 清空当前内容
    $('#content').empty();

    // 渲染当前页数据
    $.each(pageData, function(i, item) {
        $('#content').append('<div>' + item + '</div>');
    });

    // 更新分页控件
    updatePagination();
}

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

    // 添加上一页按钮
    if(currentPage > 1) {
        $('#pagination').append('<button class="prev">上一页</button>');
    }

    // 添加页码
    for(var i = 1; i <= totalPages; i++) {
        $('#pagination').append('<button class="page' + (i === currentPage ? ' active' : '') + '">' + i + '</button>');
    }

    // 添加下一页按钮
    if(currentPage < totalPages) {
        $('#pagination').append('<button class="next">下一页</button>');
    }
}

// 事件绑定
$(document).on('click', '.prev', function() {
    currentPage--;
    renderPage(currentPage);
});

$(document).on('click', '.next', function() {
    currentPage++;
    renderPage(currentPage);
});

$(document).on('click', '.page', function() {
    currentPage = parseInt($(this).text());
    renderPage(currentPage);
});

// 初始化
renderPage(1);

AJAX 动态分页

对于从服务器动态加载数据的分页实现：

var currentPage = 1;
var loading = false;

function loadPage(page) {
    if(loading) return;
    loading = true;

    $.ajax({
        url: '/api/data',
        data: {page: page, limit: 10},
        success: function(response) {
            // 渲染数据
            $('#content').empty();
            $.each(response.data, function(i, item) {
                $('#content').append('<div>' + item.name + '</div>');
            });

            // 更新分页控件
            updatePagination(response.total, response.per_page);
            currentPage = page;
        },
        complete: function() {
            loading = false;
        }
    });
}

function updatePagination(totalItems, itemsPerPage) {
    var totalPages = Math.ceil(totalItems / itemsPerPage);
    $('#pagination').empty();

    if(currentPage > 1) {
        $('#pagination').append('<button class="prev">上一页</button>');
    }

    var startPage = Math.max(1, currentPage - 2);
    var endPage = Math.min(totalPages, currentPage + 2);

    for(var i = startPage; i <= endPage; i++) {
        $('#pagination').append('<button class="page' + (i === currentPage ? ' active' : '') + '">' + i + '</button>');
    }

    if(currentPage < totalPages) {
        $('#pagination').append('<button class="next">下一页</button>');
    }
}

// 事件绑定
$(document).on('click', '.prev', function() {
    loadPage(currentPage - 1);
});

$(document).on('click', '.next', function() {
    loadPage(currentPage + 1);
});

$(document).on('click', '.page', function() {
    loadPage(parseInt($(this).text()));
});

// 初始化
loadPage(1);

使用分页插件

对于更复杂的需求，可以考虑使用现成的 jQuery 分页插件：

引入插件文件：

<script src="jquery.twbsPagination.min.js"></script>

使用示例：

$('#pagination').twbsPagination({
 totalPages: 35,
 visiblePages: 7,
 onPageClick: function (event, page) {
     $('#content').text('Page ' + page);
     // 或者调用 loadPage(page) 加载数据
 }
});

分页样式优化

为分页按钮添加基础 CSS 样式：

#pagination {
    margin: 20px 0;
    text-align: center;
}

#pagination button {
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}

#pagination button.active {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
}

#pagination button:hover:not(.active) {
    background: #f5f5f5;
}

以上方法提供了从简单到复杂的不同分页实现方案，可以根据项目需求选择合适的实现方式。对于大型项目，推荐使用专门的分页插件以获得更丰富的功能和更好的兼容性。

jquery 分页