jquery 静态分页

基础概念

jQuery静态分页是一种基于客户端的分页技术，它不依赖于服务器端的数据处理。在这种分页方式中，所有的数据一次性加载到客户端，然后通过JavaScript和jQuery来控制显示和隐藏不同的数据页。

优势

减轻服务器压力：因为数据一次性加载到客户端，服务器不需要为每一页请求单独处理数据。
快速响应：用户切换页面时，不需要重新加载整个页面，提高了用户体验。
简单实现：相对于动态分页，静态分页的实现较为简单，不需要复杂的服务器端逻辑。

类型

基于DOM的分页：通过操作DOM元素来实现分页效果。
基于CSS的分页：利用CSS隐藏和显示不同的数据页。
基于JavaScript的分页：通过JavaScript脚本控制数据的显示和隐藏。

应用场景

数据量较小的情况：适用于数据量不大，可以一次性加载到客户端的情况。
静态网站：对于一些静态网站，不需要实时更新数据，静态分页是一个很好的选择。

示例代码

以下是一个简单的jQuery静态分页示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Static Pagination</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="content">
        <!-- 数据内容 -->
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <!-- 更多数据... -->
    </div>
    <div id="pagination">
        <button class="page-btn" data-page="1">1</button>
        <button class="page-btn" data-page="2">2</button>
        <button class="page-btn" data-page="3">3</button>
        <!-- 更多分页按钮... -->
    </div>

    <script>
        $(document).ready(function() {
            var itemsPerPage = 3;
            var currentPage = 1;

            function showPage(page) {
                $('.item').addClass('hidden');
                var start = (page - 1) * itemsPerPage;
                var end = start + itemsPerPage;
                $('.item').slice(start, end).removeClass('hidden');
            }

            $('.page-btn').click(function() {
                currentPage = parseInt($(this).data('page'));
                showPage(currentPage);
            });

            showPage(currentPage);
        });
    </script>
</body>
</html>