当前位置：首页 > jquery

分页jquery

2026-03-02 19:01:10jquery

分页 jQuery 实现方法

方法一：使用 jQuery Pagination 插件

安装插件并引入相关文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pagination/1.4.2/jquery.pagination.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.pagination/1.4.2/pagination.css">

初始化分页：

$(function() {
    $("#pagination").pagination({
        items: 100, // 总条目数
        itemsOnPage: 10, // 每页显示条目数
        cssStyle: 'light-theme',
        onPageClick: function(pageNumber) {
            // 处理页码点击事件
            loadPageData(pageNumber);
        }
    });
});

方法二：自定义 jQuery 分页

HTML 结构：

<div class="pagination-container"></div>
<div class="data-container"></div>

JavaScript 实现：

function createPagination(totalItems, itemsPerPage, currentPage) {
    const totalPages = Math.ceil(totalItems / itemsPerPage);
    let paginationHtml = '<ul class="pagination">';

    // 上一页按钮
    if (currentPage > 1) {
        paginationHtml += `<li><a href="#" data-page="${currentPage - 1}">上一页</a></li>`;
    }

    // 页码按钮
    for (let i = 1; i <= totalPages; i++) {
        const activeClass = (i === currentPage) ? 'active' : '';
        paginationHtml += `<li class="${activeClass}"><a href="#" data-page="${i}">${i}</a></li>`;
    }

    // 下一页按钮
    if (currentPage < totalPages) {
        paginationHtml += `<li><a href="#" data-page="${currentPage + 1}">下一页</a></li>`;
    }

    paginationHtml += '</ul>';
    $('.pagination-container').html(paginationHtml);
}

// 事件绑定
$(document).on('click', '.pagination a', function(e) {
    e.preventDefault();
    const page = $(this).data('page');
    loadPageData(page);
});

方法三：结合 AJAX 实现动态分页

数据加载函数示例：

function loadPageData(page) {
    $.ajax({
        url: '/api/data',
        type: 'GET',
        data: { page: page, limit: 10 },
        success: function(response) {
            // 更新数据容器
            $('.data-container').html(response.data);

            // 更新分页
            createPagination(response.total, 10, page);
        }
    });
}

方法四：使用 DataTables 插件实现高级分页

引入 DataTables：

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

初始化表格分页：

$(document).ready(function() {
    $('#example').DataTable({
        "paging": true,
        "pageLength": 10,
        "lengthChange": false,
        "serverSide": true,
        "ajax": {
            "url": "/api/data",
            "type": "POST"
        }
    });
});

分页样式优化

CSS 基础样式：

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
}

.pagination li {
    margin: 0 5px;
}

.pagination li a {
    padding: 5px 10px;
    border: 1px solid #ddd;
    text-decoration: none;
}

.pagination li.active a {
    background: #337ab7;
    color: white;
    border-color: #337ab7;
}

响应式分页处理

窗口大小变化时调整分页：

$(window).resize(function() {
    if ($(window).width() < 768) {
        $('.pagination li:not(.active)').hide();
    } else {
        $('.pagination li').show();
    }
});

以上方法提供了从简单到复杂的不同 jQuery 分页实现方案，可根据项目需求选择合适的方式。插件方案适合快速开发，自定义方案则提供了更大的灵活性。

分页jquery