jquery分页

jQuery分页的实现方法

jQuery分页可以通过多种方式实现，以下是几种常见的方法：

使用插件实现分页

jQuery有许多优秀的分页插件，如jQuery Pagination、DataTables等。以jQuery Pagination为例：

// 引入插件
<script src="jquery.pagination.js"></script>

// 初始化分页
$('#pagination').pagination({
    totalData: 100, // 总数据量
    showData: 10,   // 每页显示数据量
    callback: function(api) {
        // 点击分页按钮时的回调函数
        var current = api.getCurrent();
        loadData(current); // 加载当前页数据
    }
});

手动实现分页逻辑

如果不使用插件，可以通过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>');
    });

    // 渲染分页按钮
    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').click(function() {
        currentPage = $(this).data('page');
        renderPage(currentPage);
    });
}

// 初始化
renderPage(1);

AJAX分页实现

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

function loadPage(page) {
    $.ajax({
        url: 'api/data',
        data: { page: page, limit: 10 },
        success: function(response) {
            // 渲染数据
            $('#content').html(response.data);

            // 渲染分页控件
            var totalPages = Math.ceil(response.total / 10);
            $('#pagination').empty();
            for (var i = 1; i <= totalPages; i++) {
                $('#pagination').append('<button class="page-btn" data-page="' + i + '">' + i + '</button>');
            }

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

// 初始加载第一页
loadPage(1);

分页样式优化

可以为分页按钮添加CSS样式提升用户体验：

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

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

.page-btn:hover {
    background: #f5f5f5;
}

.page-btn.active {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
}

在JavaScript中为当前页按钮添加active类：

$('.page-btn').removeClass('active');
$('.page-btn[data-page="' + currentPage + '"]').addClass('active');

分页性能优化

对于大数据量分页，可以考虑以下优化措施：

• 使用虚拟滚动代替传统分页
• 实现延迟加载（懒加载）
• 对数据进行缓存减少服务器请求
• 使用服务器端分页减轻客户端压力

以上方法可以根据实际项目需求选择适合的实现方式，插件方式适合快速开发，手动实现则更灵活可控。