纯JavaScript实现通用分页功能

// 计算总页数
var total = (Num % pageNum > 0) ? (Math.floor(Num / pageNum) + 1) : (Num / pageNum);

// 设置显示范围的基础变量
var first = 1;
var last = 1;
var decrease = Math.floor(maxPageNum / 2); // 当前页向前偏移量
var increase = Math.floor(maxPageNum / 2); // 当前页向后偏移量

if (maxPageNum >= 1) {
    if (maxPageNum == 1) {
        // 如果最多只显示1个页码按钮，则显示当前页
        first = index <= total ? index : total;
        last = index <= total ? index : total;
    } else {
        // 计算初始的 first 值
        first = index - decrease;
        while (first <= 0) {
            first++;
        }

        // 修正 first：如果剩余页数不足，调整 first 使 last 达到最大可能的总数
        if ((total - index) <= decrease) {
            var diff = total - first;
            while (diff < maxPageNum - 1) {
                if (first == 1) break;
                --first;
                diff = total - first;
            }
        }

        // 计算初始的 last 值
        last = index + increase;
        while (last >= 1) {
            if (last <= total) break;
            last--;
        }
        
        // 确保 last 不超过允许的最大显示数量限制或总页数
        last = last >= maxPageNum ? last : (maxPageNum > total ? total : maxPageNum);
    }
} else {
    alert("至少需要显示一个页码!");
}

var prev = index - 1; // 上一页索引
var next = index + 1; // 下一页索引
var str = "<tr><td>";

if (total == 0) {
    str += "共 <a href='#'>0</a> 页";
} else if (index > total || index <= 0) {
    str += "<span style='color:red;'>页码超出范围</span>";
} else if (total > 0) {
    // 添加左侧省略号
    if (first > 1) {
        str += "...";
    }

    // 循环生成分页按钮
    for (var i = first; i <= last; i++) {
        if (i == index) {
            // 当前页高亮（示例中使用简单文本标记，实际可加CSS类）
            str += "[" + i + "] ";
        } else {
            str += "<a href='#' onclick='submit(" + i + ")'>" + i + "</a> ";
        }
    }

    // 添加右侧省略号
    if (last < total) {
        str += "...";
    }

    // 添加首尾快捷链接
    str += "<br>";
    if (index != 1 && total > 1) {
        str += "<a href='#' onclick='submit(1)'>首页</a> ";
    }
    if (index != total && total > 1) {
        str += "<a href='#' onclick='submit(" + total + ")'>尾页</a>";
    }
}
str += "</td></tr>";

// 假设分页区域有一个 id 为 page-container 的元素
document.getElementById('page-container').innerHTML = str;

// 页码点击触发事件
function submit(pageIndex) {
    // 更新地址栏或发起 AJAX 请求加载新数据
    console.log("跳转到第 " + pageIndex + " 页");
    window.location.href = "?page=" + pageIndex;
}