jquery 下拉分页

基础概念

jQuery 下拉分页是一种使用 jQuery 库实现的分页功能，通常用于网页中展示大量数据时，通过下拉菜单选择页码来切换显示不同的数据页。这种分页方式简洁直观，用户体验较好。

类型

静态下拉分页：预先定义好所有页码，用户只能选择已定义的页码。
动态下拉分页：根据数据总量和每页显示数量动态生成页码，用户可以选择任意页码。

应用场景

适用于数据量较大且需要分页展示的网页，如商品列表、文章列表等。

示例代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 下拉分页示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="page-select">
        <!-- 页码选项将通过 jQuery 动态生成 -->
    </select>
    <div id="content">
        <!-- 数据内容将通过 jQuery 动态加载 -->
    </div>

    <script>
        $(document).ready(function() {
            var totalPage = 10; // 总页数
            var pageSize = 5; // 每页显示数量

            // 动态生成页码选项
            for (var i = 1; i <= totalPage; i++) {
                $('#page-select').append($('<option>', {
                    value: i,
                    text: i
                }));
            }

            // 默认加载第一页数据
            loadPage(1);

            // 监听下拉菜单变化事件
            $('#page-select').change(function() {
                var selectedPage = $(this).val();
                loadPage(selectedPage);
            });

            // 加载指定页码的数据
            function loadPage(page) {
                // 这里可以通过 AJAX 请求从服务器获取数据并显示在 #content 中
                $('#content').html('加载第 ' + page + ' 页的数据...');
            }
        });
    </script>
</body>
</html>