基于 jQuery 的 JavaScript 仿百度分页插件实现

实现原理与目标

该分页函数的目标是模拟常见的搜索引擎分页体验，主要解决以下问题：

• 在总页数较多时，仅展示当前页附近的有限页码（默认展示5个），避免页面冗长。
• 自动判断“上一页”和“下一页”的显示状态。
• 提供统一的回调接口，方便开发者注入数据加载逻辑。

准备条件

使用该分页功能前，需确保项目已引入 jQuery 库，且 HTML 结构中预留了用于承载分页控件的容器元素。
通常建议使用 <ul class="pagination"></ul> 作为容器，其中类名 pagination 将作为定位依据。

核心代码实现

以下是完整的 pagination 函数定义，采用对象方法形式封装，便于挂载到全局或特定对象中：

/**
 * Ajax分页功能
 * 在需要分页的地方添加 <ul class="pagination"></ul>
 * 作为分页组件容器元素。
 * pageCount 总页数
 * currentPage 当前页数
 * container 带有pagination类的ul容器元素
 * loadData 用于加载数据的函数
 * version 1.0
 */
pagination : function(pageCount, currentPage, container, loadData) {
    this.startPage = 1;
    this.endPage = pageCount;
    this.minDisplayPageCount = 5; // 最小显示页码数
    
    var c = $(container);
    var paginationLinks = "";
    
    // 如果只有一页，隐藏分页组件
    if(pageCount == 1) {
        c.css({'visibility': 'hidden'});
        return;
    }
    
    // 计算起始页和结束页
    if(pageCount > this.minDisplayPageCount + 1) {
        // 确定 startPage
        if(currentPage - this.minDisplayPageCount > 0) {
            this.startPage = currentPage - this.minDisplayPageCount;
        }
        // 确定 endPage
        if((currentPage + this.minDisplayPageCount - 1) < pageCount) {
            this.endPage = currentPage + this.minDisplayPageCount - 1;
        } else {
            this.endPage = pageCount;
        }
    }
    
    // 构建HTML字符串
    paginationLinks += "
";
    
    // 添加“上一页”按钮
    if(currentPage != 1) {
        paginationLinks += "
«上一页
";
    }
    
    // 循环生成分页链接
    for(var i = this.startPage; i <= this.endPage; i++) {
        if(currentPage == i) {
            // 当前页标记为 current 样式
            paginationLinks += "
" + currentPage + "
";
        } else {
            paginationLinks += "
" + i + "
";
        }
    }
    
    // 添加“下一页”按钮
    if(currentPage < pageCount) {
        paginationLinks += "
下一页»
";
    }
    
    paginationLinks += "
";
    
    // 替换容器内容
    c.html(paginationLinks);
    
    // 重新获取所有生成的链接以绑定事件
    // 注意：原代码中 $('#page_number ul li a') 可能存在选择器歧义，建议明确作用域
    var links = $(container).find('a');
    
    links.each(function(index) {
        // 跳过非页码类型的按钮（如上下页可能需要单独处理，此处逻辑稍作调整以适配原意）
        // 原文逻辑是检查 innerHTML，但更好的做法是通过 ID 或 Class 区分
        if($(this).attr('id') !== 'prevpage' && $(this).attr('id') !== 'nextpage') {
            var pageNum = parseInt($(this).text());
            $(this).click(function(event) {
                event.preventDefault();
                // 执行数据加载
                loadData("taskId_placeholder", "", "", pageNum);
                // 递归调用刷新分页 UI
                pagination(pageCount, pageNum, container, loadData);
            });
        }
    });
    
    // 处理上一页
    var prevPage = $(container).find('#prevpage');
    if(prevPage.length) {
        prevPage.click(function(event) {
            event.preventDefault();
            loadData("taskId_placeholder", "", "", currentPage - 1);
            pagination(pageCount, currentPage - 1, container, loadData);
        });
    }
    
    // 处理下一页
    var nextPage = $(container).find('#nextpage');
    if(nextPage.length) {
        nextPage.click(function(event) {
            event.preventDefault();
            loadData("taskId_placeholder", "", "", currentPage + 1);
            pagination(pageCount, currentPage + 1, container, loadData);
        });
    }
    
    c.css({'visibility': 'visible'});
}

注意事项与优化点

原文代码中存在一些潜在的可维护性问题，建议在复制使用时进行微调：
- **变量命名**：原代码中使用硬编码字符串 'taskId_placeholder' 替代了外部的 curTaskId，实际使用中请替换为真实的全局变量或参数。
- **事件委托**：对于动态生成的 DOM，推荐使用事件委托或直接在生成后绑定，上述代码采用了即时绑定方式。
- **选择器准确性**：原代码中 $('#page_number ul li a') 假设存在固定父容器，若结构变化可能导致失效，建议改为针对 container 内部查找。

使用方法

定义好分页函数后，需要编写具体的数据加载逻辑 loadExamList 来配合使用：

var currentPage = 1;
// 假设这是你的数据加载函数
function loadExamList(page) {
    // TODO: 发起 AJAX 请求获取数据
    console.log('Loading page:', page);
    
    // 假设获取到的总页数为 5 (实际应由后端返回)
    var totalPags = 5;
    
    // 调用分页渲染函数
    // 参数：总页数, 当前页, 容器选择器, 数据加载回调
    pagination(totalPags, page, $('ul.pagination'), loadExamList);
}

在页面初始化时，首次调用 loadExamList(1) 即可触发渲染。
当用户点击任意页码或上下页按钮时，都会重新调用 loadExamList，进而刷新分页条显示。

完成判断

当页面底部正确显示了包含 «上一页、数字链接及 下一页» 的列表，且点击各按钮能触发预期的数据加载行为并更新高亮状态时，即表示分页功能部署成功。

以上就是基于 jQuery 实现仿百度风格分页功能的详细内容，更多关于 JavaScript 前端组件开发的资料请关注本站其它相关文章！