JavaScript 分页函数实现与优化

结果与目标

实现一个可复用的 JavaScript 分页对象，能够根据给定的数据总量（nTotalList）、每页显示条数（nPageSize）和当前页码（nPageNum），动态计算出总页数，并输出格式化的分页导航 HTML。核心功能包括：

• 自动计算最大页码。
• 生成页码下拉选择框，支持快速跳转。
• 提供“首页”、“上页”、“下页”、“尾页”导航链接。
• 当页码超出范围或位于边界时，禁用相应导航按钮。

准备条件

使用该分页函数无需安装任何外部库。只需确保你的页面中已加载 JavaScript 环境，并准备好以下输入参数：

• 总记录数：nTotalList，类型为数字，表示数据表的总行数。
• 每页显示数：nPageSize，类型为数字，决定每一页展示多少条数据。
• 当前页码：nPageNum，类型为数字，用户当前浏览的是第几页。
• 分页 URL 模板：sPageUrl，字符串类型。其中使用占位符 [pn] 代表页码位置，例如 "list.html?page=[pn]"。
• 可选：下拉框最大显示页数：nPageListSize，默认为 100，控制下拉菜单中最多显示多少个页码选项。

真实操作顺序

第一步：定义分页构造函数

首先创建一个名为 Pagination 的构造函数，用于初始化分页实例的状态。该函数接收四个必需参数和一个可选参数，负责存储配置信息并计算总页数。

入口：在当前页面的脚本标签或外部 JS 文件中定义。

动作：将参数赋值给实例属性，并根据公式 (总数-1)/每页条数 + 1 计算总页数。若总数为 0，则强制设为 1 页以防除零错误。

function Pagination(nTotalList, nPageSize, nPageNum, sPageUrl, nPageListSize) {
    this.totalList = nTotalList;
    this.pageSize = nPageSize;
    this.pageNum = nPageNum;
    
    // 计算总页数：向上取整的简化算法
    if (nTotalList == 0) {
        this.totalPages = 1;
    } else {
        this.totalPages = Math.floor((this.totalList - 1) / this.pageSize + 1);
    }
    
    this.pageUrl = sPageUrl;
    
    // 处理可选参数：页码下拉框的最大显示数量
    if (arguments[4]) {
        this.pageListSize = nPageListSize;
    } else {
        this.pageListSize = 100;
    }
}

第二步：实现分页生成逻辑

在 Pagination.prototype 上添加 generate 方法。该方法负责构建最终的 HTML 字符串，并通过 document.writeln 直接输出到页面当前位置。

目的：解析参数，生成包含样式表格、下拉选单和超链接的完整分页组件。

关键逻辑：

1. 构建头部信息：插入“共 X 条 每页 Y 条”的文字说明。
2. 生成分页下拉框：通过循环计算可见页码范围（考虑首尾省略号），生成 <select> 标签。监听 onchange 事件，利用正则替换 URL 中的 [pn] 实现页面跳转。
3. 处理导航按钮：
   • 若 pageNum == 1，隐藏“首页”和“上页”的可点击状态，仅显示文本。
   • 否则，生成带有替换后 URL 的 <a> 标签。
   • 同理处理“下页”和“尾页”，判断是否已到最后一页。
4. 错误提示：如果传入的当前页码大于总页数，在下拉框中添加“页码超出范围”的选项。

Pagination.prototype.generate = function() {
    var output = "";
    
    // 包裹在 table 中以保持原有布局风格
    output += '<table width="98%" cellspacing="1" cellpadding="3" align="center"><tr><td align="right">';
    
    // 文字说明部分
    output += "共 " + this.totalList + " 条 每页 " + this.pageSize + " 条 当前第 ";
    
    // 开始生成分页下拉框
    output += '<select onchange="if(this.value)location.href='' + this.pageUrl + ''.replace(/\\[pn\\]/,';
    output += 'this.value);" align="absMiddle" style="font:normal 9px Verdana,Arial,宋体;">';
    
    // 计算下拉框显示的页码范围
    var firstPage = this.pageNum - Math.floor(this.pageListSize / 2);
    if (firstPage < 1) firstPage = 1;
    
    var lastPage = firstPage + this.pageListSize - 1;
    if (lastPage > this.totalPages) {
        lastPage = this.totalPages;
        firstPage = lastPage - this.pageListSize + 1;
        if (firstPage < 1) firstPage = 1;
    }
    
    // 添加起始页码和省略号
    if (firstPage > 1) {
        output += '<option value="1">1</option>';
        if (firstPage > 2) output += '<option value="">…</option>';
    }
    
    // 循环添加中间页码
    for (var p = firstPage; p <= lastPage; p++) {
        output += '<option value="' + p + '"';
        if (p == this.pageNum) output += ' selected="yes"';
        output += '>' + p + '</option>';
    }
    
    // 添加末尾页码和省略号
    if (lastPage < this.totalPages) {
        if (lastPage < this.totalPages - 1) output += '<option value="">…</option>';
        output += '<option value="' + this.totalPages + '">' + this.totalPages + '</option>';
    }
    
    // 页码异常检查
    if (this.pageNum > this.totalPages) {
        output += '<option value="" selected="yes">页码超出范围</option>';
    }
    
    output += '</select> / ' + this.totalPages + ' 页 ';
    
    // 生成 [首页] [上页]
    if (this.pageNum == 1) {
        output += "[首页] [上页] ";
    } else {
        output += '<a href="' + this.pageUrl.replace(/\[pn\]/, "1") + '"><[/a]>[首页]</a> ';
        output += '<a href="' + this.pageUrl.replace(/\[pn\]/, this.pageNum - 1) + '"><[/a]>[上页]</a> ';
    }
    
    // 生成 [下页] [尾页]
    if (this.pageNum == this.totalPages) {
        output += "[下页] [尾页]";
    } else {
        output += '<a href="' + this.pageUrl.replace(/\[pn\]/, this.pageNum + 1) + '"><[/a]>[下页]</a> ';
        output += '<a href="' + this.pageUrl.replace(/\[pn\]/, this.totalPages) + '"><[/a]>[尾页]</a> ';
    }
    
    output += '</td></tr></table>';
    
    // 直接写入页面
    document.writeln(output);
};

第三步：调用分页函数

在实际业务中，后端需提供分页所需的数据元信息。在前端脚本中实例化 Pagination 对象并调用 generate() 方法即可渲染控件。

// 示例调用
// 假设总共有 150 条数据，每页显示 10 条，当前在第 5 页
// URL 模板为 page.php?page=[pn]
var pn = new Pagination(150, 10, 5, "page.php?page=[pn]");
pn.generate();

完成判断

检查页面底部是否正确显示了包含总条数、当前页码下拉框以及“首页、上页、下页、尾页”链接的分页栏。点击下拉框中的页码应能正确刷新页面并跳转到对应页；点击导航链接同样应能正常切换页码。若当前在第一页，“首页”和“上页”应显示为纯文本而非可点击链接。

简要总结

上述 JavaScript 分页函数通过简单的面向对象封装，解决了前端列表中常见的分页导航需求。虽然现代前端框架（如 Vue、React）有更高效的虚拟 DOM 处理方式，但这一原生实现依然适用于传统的 jQuery 项目或轻量级静态页面开发，具有零依赖、易集成的特点。以上就是 JavaScript 实现分页函数的详细内容，更多关于 JavaScript 前端控件开发的资料请关注本站其它相关文章！