使用分页插件实现每页显示的条数

使用分页插件可以实现每页显示的条数，具体步骤如下：

引入分页插件的相关文件，例如jQuery和分页插件的js文件。
在页面中创建一个用于显示数据的容器，例如一个div元素。
在页面中创建一个用于显示分页的容器，例如一个ul元素。
在页面加载完成后，使用jQuery选择器选中数据容器和分页容器，并调用分页插件的初始化方法。
在初始化方法中设置每页显示的条数，例如通过设置pageSize参数。
在初始化方法中设置数据总数，例如通过设置total参数。
在初始化方法中设置回调函数，用于在用户点击分页按钮时加载对应页的数据。
在回调函数中根据当前页和每页显示的条数获取对应的数据，并将数据渲染到数据容器中。
在回调函数中更新分页按钮的状态，例如根据当前页和总页数设置上一页和下一页按钮是否可点击。
完成以上步骤后，每当用户点击分页按钮时，分页插件会自动加载对应页的数据并更新分页按钮的状态。

下面是一个使用分页插件的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>使用分页插件实现每页显示的条数</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="pagination.js"></script>
    <style>
        .data-container {
            margin-bottom: 20px;
        }
        .pagination-container {
            list-style: none;
            padding: 0;
        }
        .pagination-container li {
            display: inline-block;
            margin-right: 5px;
        }
        .pagination-container li a {
            display: inline-block;
            padding: 5px 10px;
            background-color: #f2f2f2;
            text-decoration: none;
        }
        .pagination-container li.active a {
            background-color: #666;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="data-container"></div>
    <ul class="pagination-container"></ul>
    <script>
        $(document).ready(function() {
            var dataContainer = $('.data-container');
            var paginationContainer = $('.pagination-container');
            
            // 模拟数据
            var data = [
                { id: 1, name: 'John' },
                { id: 2, name: 'Jane' },
                { id: 3, name: 'Bob' },
                { id: 4, name: 'Alice' },
                { id: 5, name: 'Tom' },
                { id: 6, name: 'Jerry' },
                { id: 7, name: 'Mike' },
                { id: 8, name: 'Emily' },
                { id: 9, name: 'David' },
                { id: 10, name: 'Linda' },
                { id: 11, name: 'Sam' },
                { id: 12, name: 'Sara' },
            ];
            
            // 初始化分页插件
            paginationContainer.pagination({
                pageSize: 5,
                total: data.length,
                callback: function(currentPage) {
                    // 计算起始索引和结束索引
                    var startIndex = (currentPage - 1) * this.pageSize;
                    var endIndex = startIndex + this.pageSize;
                    
                    // 获取对应页的数据
                    var pageData = data.slice(startIndex, endIndex);
                    
                    // 渲染数据
                    dataContainer.empty();
                    $.each(pageData, function(index, item) {
                        dataContainer.append('<p>ID: ' + item.id + ', Name: ' + item.name + '</p>');
                    });
                    
                    // 更新分页按钮的状态
                    paginationContainer.find('li').removeClass('active');
                    paginationContainer.find('li:eq(' + (currentPage - 1) + ')').addClass('active');
                }
            });
            
            // 默认加载第一页的数据
            paginationContainer.find('li:first-child a').trigger('click');
        });
    </script>
</body>
</html>

在上述代码中，我们引入了jQuery和一个名为pagination.js的分页插件文件。然后，我们创建了一个用于显示数据的div容器和一个用于显示分页的ul容器。在页面加载完成后，我们使用选择器选中数据容器和分页容器，并调用分页插件的初始化方法。在初始化方法中，我们设置了每页显示的条数为5条，并指定了数据总数和回调函数。回调函数会在用户点击分页按钮时被调用，我们在回调函数中根据当前页和每页显示的条数获取对应的数据，并将数据渲染到数据容器中。最后，我们通过触发第一个分页按钮的点击事件来加载第一页的数据，并完成了使用分页插件实现每页显示的条数的功能