JavaScript 轻量级通用分页组件实现

组件核心特性

该分页组件旨在解决传统分页代码冗余的问题，主要具备以下功能：

• 智能显隐：当总页数小于或等于每页条数时，自动隐藏分页条；支持根据总页数多少自动隐藏“GoTo”输入框。
• 灵活的省略号：采用类似 WordPress 的分页策略，始终显示第1页和第N页，中间的页码通过“...”省略，保证界面简洁。
• 高度可定制：支持自定义模板字符串、显示样式（颜色、边框）以及是否显示“上一页/下一页”和“跳转”输入框。

准备工作

在使用前，请确保 HTML 页面中存在一个用于承载分页控件的 <div> 容器，并准备好后端返回的数据总量（totalCount）。组件需要通过回调函数通知前端当前选中的页码，以便重新请求或渲染对应的数据片段。

第一步：定义页码切换回调函数

首先，需要编写一个 JavaScript 函数来处理用户点击页码后的业务逻辑。在这个函数内部，你可以调用后端接口获取新数据，或者使用现有的 AJAX 方法更新页面内容。

以下是典型的调用示例：

var pageChange = function (index) {
    // index 代表点击的新页码，从1开始
    console.log("用户跳转到第 " + index + " 页");

    // 此处执行实际的数据请求或列表重绘逻辑
    var html = pager("pageBox", index, 5, 1000, pageChange, { 
        showGoTo: false, 
        showFirst: false 
    });
};

注意："pageBox" 是后续要绑定的 HTML 容器 ID。5 代表默认显示的连续页码数量，1000 代表数据总数，需根据实际请求结果进行动态替换。

第二步：引入并运行分页组件脚本

将核心的 `pager` 函数定义包含在你的 JS 文件或独立的脚本块中。该函数负责计算起始页、终止页，并根据配置的参数生成 HTML 结构。

// 全局分页函数定义
pager = function (divPager, pageIndex, pageSize, totalCount, pageChange, opt) {
    var theOpt = {
        barSize: 5,            // 分页条显示的页码数
        barTemplate: "{bar}  共{totalPage}页{totalCount}条 {goto}", // 显示模板
        autoHide: true,        // 是否自动隐藏
        showFirst: true,       // 在totalPage > barSize时是否显示第一页链接
        showLast: true,        // 在totalPage > barSize时是否显示最后一页链接
        showGoTo: true,        // 是否显示GoTo
        autoHideGoTo: true     // 如果太少是否自动隐藏GoTo
    };

    // 合并用户传入的可选参数
    if (opt) {
        if (opt.barSize) theOpt.barSize = opt.barSize;
        if (opt.barTemplate) theOpt.barTemplate = opt.barTemplate;
        if (opt.autoHide == false) theOpt.autoHide = false;
        if (opt.showFirst == false) theOpt.showFirst = false;
        if (opt.showLast == false) theOpt.showLast = false;
        if (opt.showGoTo == false) theOpt.showGoTo = false;
        if (opt.autoHideGoTo == false) theOpt.autoHideGoTo = false;
    }

    var handles = window.myPagerChanges = (function (x) { return x; } (window.myPagerChanges || {}));
    if (!myPagerChanges[divPager]) myPagerChanges[divPager] = pageChange;

    // 边界条件处理
    var startPage = 0;
    var endPage = 0;
    var totalPage = Math.ceil(totalCount / pageSize);

    if (isNaN(pageIndex)) pageIndex = 1;
    pageIndex = parseInt(pageIndex);
    if (pageIndex <= 0) pageIndex = 1;
    if (pageIndex * pageSize > totalCount) pageIndex = Math.ceil(totalCount / pageSize);

    // 如果没有数据或只有一页且设置自动隐藏，则清空分页条
    if (totalCount == 0 || (theOpt.autoHide && totalCount <= pageSize)) {
        document.getElementById(divPager).innerHTML = "";
        return "";
    }

    // 计算可见页码范围逻辑
    if (totalPage <= theOpt.barSize) {
        startPage = 1;
        endPage = totalPage;
        theOpt.showLast = theOpt.showFirst = false;
    } else {
        if (pageIndex <= Math.ceil(theOpt.barSize / 2)) {
            startPage = 1;
            endPage = theOpt.barSize;
            theOpt.showFirst = false;
        } else if (pageIndex > (totalPage - theOpt.barSize / 2)) {
            startPage = totalPage - theOpt.barSize + 1;
            endPage = totalPage;
            theOpt.showLast = false;
        } else {
            startPage = pageIndex - Math.ceil(theOpt.barSize / 2) + 1;
            endPage = pageIndex + Math.floor(theOpt.barSize / 2);
        }
        if (totalPage <= (theOpt.barSize * 1.5)) {
            theOpt.showLast = theOpt.showFirst = false;
        }
    }

    // 辅助函数：生成分页链接HTML
    function _getLink(index, txt) {
        if (!txt) txt = index;
        return "<a href='javascript:;' style='margin: 2px 5px;border: 1px solid #6d8cad;color: #0269BA;padding: 2px 5px;text-decoration: none;' onclick='myPagerChanges[\"" + divPager + "\"](" + index + ")'>" + txt + "</a>";
    }

    // 组装分页栏 HTML
    var barHtml = "";
    barHtml += pageIndex == 1 ? "" : _getLink(pageIndex - 1, "上一页");
    if (theOpt.showFirst) barHtml += _getLink(1) + "<span>...</span>";

    for (var index = startPage; index <= endPage; index++) {
        if (index == pageIndex) {
            barHtml += "<span style='color:red;font-weight:blod; '>" + index + "</span>";
        } else {
            barHtml += _getLink(index);
        }
    }

    if (theOpt.showLast) barHtml += "<span>...</span>" + _getLink(totalPage);
    barHtml += pageIndex == totalPage ? "" : _getLink(pageIndex + 1, "下一页");

    // 组装跳转框 HTML
    var gotoHtml = "";
    if (theOpt.showGoTo && theOpt.barTemplate.indexOf("{goto}") > 0) {
        if ((theOpt.autoHideGoTo && totalPage > 15) || theOpt.autoHideGoTo == false) {
            var txtid = divPager + "_goIndex";
            var indexVal = "document.getElementById(\"" + txtid + "\").value";
            gotoHtml += "<input type='text' onkeypress='if(event.keyCode==13){myPagerChanges[\"" + divPager + "\"](" + indexVal + ")}' id='" + txtid + "' value=" + pageIndex + " style='width:30px'>";
            gotoHtml += " <input type='button' class='page_bg' value='go' onclick='myPagerChanges[\"" + divPager + "\"](" + indexVal + ")'>";
        }
    }

    // 替换模板变量
    var pagerHtml = theOpt.barTemplate.replace("{bar}", barHtml)
        .replace("{totalCount}", totalCount)
        .replace("{pageIndex}", pageIndex)
        .replace("{totalPage}", totalPage)
        .replace("{goto}", gotoHtml);

    // 输出到 DOM
    document.getElementById(divPager).innerHTML = pagerHtml;
    return pagerHtml;
};

关键参数说明

为了适应不同的项目需求，开发者可以通过第四个参数 opt 对象调整行为：

• barSize：整数，控制每次显示多少个连续页码按钮（默认为 5）。
• barTemplate：字符串，定义了分页条的最终布局。支持的占位符有 {bar}（页码按钮组）、{totalPage}（总页数）、{totalCount}（总条目数）和 {goto}（跳转框）。
• showFirst/Last：布尔值，控制是否在中间省略号位置强制显示第一页或最后一页链接。
• autoHideGoTo：布尔值，如果设为 true，且总页数超过 15 页时会自动隐藏输入跳转框，防止界面过于拥挤。

第三步：在 HTML 结构中挂载容器

最后，在页面的对应位置放置一个带有特定 ID 的 <div>，例如：

当页面加载完毕并获取到数据后，直接调用 `pageChange` 函数并将初始页码设为 1，即可触发整个渲染流程。

总结

这段 JavaScript 分页代码提供了一个经典的解决方案，特别适合没有复杂构建工具的传统后台管理系统或 CMS 系统。它通过巧妙的 DOM 操作实现了灵活的 UI 配置，同时保持了极低的耦合度。开发者只需关注数据接口的交互，剩下的分页条绘制工作完全交由该函数自动化处理。以上就是 JavaScript 轻量级通用分页组件实现的详细内容，更多关于前端数据展示技巧的资料请关注本站其它相关文章！