jQuery实现简单分页

以下是一个使用jQuery实现的简单分页示例。这个示例假设你已经有了一个包含数据的列表，并且你想要在列表中实现分页。

HTML 部分:

<div id="data-container">
    <!-- 数据列表 -->
    <ul id="data-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <!-- 更多的列表项 -->
    </ul>
    <!-- 分页导航 -->
    <div id="pagination"></div>
</div>

jQuery 和 JavaScript 部分:

$(document).ready(function() {
    var itemsPerPage = 5; // 每页显示的项目数
 
    // 计算总页数
    var totalItems = $('#data-list li').length;
    var pages = Math.ceil(totalItems / itemsPerPage);
 
    // 添加分页导航
    for (var i = 1; i <= pages; i++) {
        $('#pagination').append('<a href="#" class="page-link" data-page="' + i + '">' + i + '</a> ');
    }
 
    // 默认显示第一页
    showPage(1);
 
    // 分页点击事件
    $('#pagination').on('click', '.page-link', function(e) {
        e.preventDefault();
        showPage($(this).data('page'));
    });
 
    // 显示特定页的函数
    function showPage(page) {
        var startItem = (page - 1) * itemsPerPage;
        var endItem = startItem + itemsPerPage;
 
        // 隐藏所有列表项
        $('#data-list li').hide().slice(startItem, endItem).show();
    }
});

这段代码首先计算了需要显示的总页数，并为每一页创建了分页导航链接。点击分页链接时，会调用showPage函数来显示对应页的内容。showPage函数计算了当前页应该显示的列表项的起始和结束索引，并隐藏了所有项，只显示当前页的项。