原生JavaScript实现HTML表格分页效果

实现思路与核心参数

在不依赖后端API的情况下，对现有HTML表格进行分页的核心在于“显示控制”。其基本逻辑是：首先计算总页数，然后根据当前页码确定该页应展示的记录范围（起始行与结束行），最后通过修改对应

实现此功能主要依赖以下几个关键变量的定义：

• record：每页需要显示的记录条数，决定分页的频率。
• count：表格中的总记录数量，用于初始化分页系统。
• pageTotal：根据总数与每页记录数自动计算出的总页数。
• pagenum：当前正在查看的页码序号。

基础数据结构与工具函数

为了让体验更友好，通常会引入简单的Cookie读取机制以保存用户浏览到的页码，防止刷新页面后回到第一页。同时，扩展字符串方法以实现简易的参数替换功能。

<script type="text/javascript">
var record = 4; // 每页显示多少条记录
var count = 24; // 记录总数
var pageTotal = ((count+record-1)/record)|0; // 计算总页数（向上取整）
var pagenum = 1; // 将要显示的页码

// 简化的Cookie操作对象
Cookie = {
    Set : function (){
        var name = arguments[0], value = escape(arguments[1]), days = 365, path = "/";
        if(arguments.length > 2) days = arguments[2];
        if(arguments.length > 3) path = arguments[3];
        with(new Date()){setDate(getDate()+days);days=toUTCString();}
        document.cookie = "{0}={1};expires={2};path={3}".format(name, value, days, path);
    },
    Get : function (){
        var returnValue=document.cookie.match(new RegExp("[\b^;]?" + arguments[0] + "=([^;]*)(?=;|\b|$)","i"));
        return returnValue?unescape(returnValue[1]):returnValue;
    }
}

// 字符串格式化辅助函数
String.prototype.format = function(){
    var tmpStr = this;
    var iLen = arguments.length;
    for(var i=0;i<iLen;i++){
        tmpStr = tmpStr.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
    }
    return tmpStr;
}
</script>

分页控制与显示逻辑

核心的控制函数负责根据pagenum的状态来计算当前页的数据区间，并遍历表格执行显隐操作。同时，它还需要智能更新底部导航栏的状态（例如当在第一页时，“第一页”和“上一页”按钮应当变为普通文本且不可点击）。

第1步：初始化页码与坐标校准

在页面加载时，首先尝试从Cookie中获取上次的浏览记录。若不存在或数值异常，则重置为第一页。随后检查页码是否越界，确保不超过pageTotal且不小于1。

// 读取并初始化页码
pagenum = Cookie.Get("pagenum");
if(pagenum=="" || pagenum<1){ pagenum=1; }

// 越界修正函数
function coordinatePagenum(num){
    if(num<1){ num="1"; }
    else if(num>pageTotal){ num=pageTotal; }
}

第2步：渲染页面内容与更新控件状态

执行此步骤将重绘表格的行可见性，并生成对应的超链接代码块供后续渲染使用。

function showhiddenRecord(pagenum){
    // 更新当前页码显示元素
    number.innerHTML=pagenum;
    
    // 动态构建导航栏链接：首项/前项处理
    if(pagenum<=1){
        theFirstPage.innerHTML="第一页";
        thePrePage.innerHTML="上一页";
    }else{
        theFirstPage.innerHTML="<a href='javascript:firstPage()'>第一页</a>";
        thePrePage.innerHTML="<a href='javascript:prePage()'>上一页</a>";
    }
    
    // 动态构建导航栏链接：末项/后项处理
    if(pagenum>=pageTotal){
        theNextPage.innerHTML="下一页";
        theLastPage.innerHTML="最后一页";
    }else{
        theNextPage.innerHTML="<a href='javascript:nextPage()'>下一页</a>";
        theLastPage.innerHTML="<a href='javascript:lastPage()'>最后一页</a>";
    }
    
    // 同步下拉框状态（如有）
    document.getElementById('goto').value=pagenum;
    
    // 计算本段显示的首尾记录索引（基于1的序号）
    pageBegin = (record*(pagenum-1)+1)|0;
    pageEnd = record*pagenum;
    
    // 核心：遍历表格行，应用显示控制
    for(var i=1;i<=count;i++){
        if(i>=pageBegin && i<=pageEnd){
            mytable.rows[i].style.display="";  // 显示符合条件的行
        }else{
            mytable.rows[i].style.display="none"; // 隐藏不符合条件的行
        }
    }
    
    // 保存最新页码到存储介质
    Cookie.Set("pagenum", pagenum);
}

第3步：封装分页动作函数

将常见的翻页动作（前一页、后一页、首页、末页、跳转页）分别封装为独立函数，并在触发时调用核心更新函数。

function firstPage(){ pagenum=1; showhiddenRecord(pagenum); }
function lastPage(){ showhiddenRecord(pageTotal); }
function prePage() { pagenum--; coordinatePagenum(pagenum); showhiddenRecord(pagenum); }
function nextPage() { pagenum++; coordinatePagenum(pagenum); showhiddenRecord(pagenum); }

// 跳转到指定页（通常由下拉框触发）
function gotoPage(num){
    coordinatePagenum(pagenum); // 注意此处原逻辑似乎未更新pagenum变量导致bug，标准做法应为 pagenum=num; 随后再校验
    // 修正逻辑建议：
    pagenum = num;
    coordinatePagenum(pagenum);
    showhiddenRecord(pagenum);
}

HTML结构与界面集成

在页面结构中，我们需要预留出用于放置导航按钮的容器，以及承载数据的<table>表格。注意：为了方便脚本直接定位，表格必须赋予ID属性（如mytable），且导航区域需预留对应ID以便注入内容。

<body onLoad="showhiddenRecord(pagenum)">
<center>
    共  页 当前第 <span id="number">1</span> 页
    <span id="theFirstPage"></span>
    <span id="thePrePage"></span>
    <span id="theNextPage"></span>
    <span id="theLastPage"></span>
    转到第
    <select onChange="gotoPage(this.value)" name="goto">
        
        <option value=1>1</option>
        <option value=2>2</option>
        <option value=3>3</option>
        <option value=4>4</option>
        <option value=5>5</option>
        <option value=6>6</option>
    </select>页
</center>

<TABLE id="mytable" cellpadding=4 cellspacing=1 border=0 bgcolor=#999999 width=500 align=center>
    <TR bgcolor=#ffffff><TD>标题</TD></TR>
    <!-- 数据行占位 -->
    <TR bgcolor=#ffffff><TD>1</TD></TR>
    ... （此处省略中间多行相同结构数据） ...
    <TR bgcolor=#ffffff><TD>24</TD></TR>
</TABLE>
</body>

注意事项与维护

上述方案适用于数据量较小、纯前端渲染的环境。在实际企业级开发中需注意以下几点：
1. 性能损耗：由于表格的所有行都必须在DOM中存在然后被隐藏，如果数据达到数千甚至上万条，会造成极大的内存开销和渲染卡顿。大流量场景必须改为服务端分页（只请求当前页数据）。
2. 硬编码风险：原文HTML中对“下一页/首页”的判断是直接拼接字符串，这在现代框架中建议使用绑定事件而非内联JS。
3. 脚本纠错：原文提供的gotoPage函数存在逻辑瑕疵，未正确将传入参数赋值给全局pagenum变量即进行状态同步，实际部署时已做说明修正。