下面是一段js+table分页，主要思路是把每个tr做为一个元素，前提是表格已经生成。一起加起来放在一个数组里面。每页显示5条数据，然后判断在哪个页面。从数组显示出当前页面的数据。
效果图下如所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>分页</title>
<style>
table{border:1px solid #f60;BORDER-COLLAPSE:collapse;border-spacing:0;margin-bottom:10px}
table td{border:1px solid #f60;font-size:12px;line-height:25px;}
table .title{background:#FFCC00;height:30px;line-height:30px;}
.h{width:100px;text-align:center}
a{padding:3px 5px;background:#f60;color:#fff;display:inline-block;margin:0 3px;border:1px solid #f60;text-decoration:none;}
em{font-style:normal;padding:3px 5px;display:inline-block;background:#eee;border:1px solid #ccc}
</style>
</head>
<body>
<table width="100" border="0" id="tablelist" style="display:none;">
<thead><tr class="title"><th class="h">标题</th></tr></thead>
<tr><td>测试分页1</td></tr>
<tr><td>测试分页2</td></tr>
<tr><td>测试分页3</td></tr>
<tr><td>测试分页4</td></tr>
<tr><td>测试分页5</td></tr>
<tr><td>测试分页6</td></tr>
<tr><td>测试分页7</td></tr>
<tr><td>测试分页8</td></tr>
<tr><td>测试分页9</td></tr>
<tr><td>测试分页10</td></tr>
<tr><td>测试分页11</td></tr>
<tr><td>测试分页12</td></tr>
<tr><td>测试分页13</td></tr>
<tr><td>测试分页14</td></tr>
<tr><td>测试分页15</td></tr>
<tr><td>测试分页16</td></tr>
<tr><td>测试分页17</td></tr>
<tr><td>测试分页18</td></tr>
</table>
<script>
function Request(strName)
{
var strHref = window.document.location.href;
var intPos = strHref.indexOf("?");
var strRight = strHref.substr(intPos + 1);
var arrTmp = strRight.split("&");
for(var i = 0; i < arrTmp.length; i++)
{
var arrTemp = arrTmp[i].split("=");
if(arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];
}
return "";
}
var tb="";
var n=5;//每页5行
if(Request("p")==null || Request("p")=="")//第一次没有传第几页
page=0;//初始化
else
page=Request("p");//有值取第几页
var tablist=document.getElementById("tablelist").getElementsByTagName('tr');//遍历所有tr
var trlist=tablist[1].parentNode.innerHTML;//获取所有非标题的TR
var trtitle=tablist[0].parentNode.innerHTML;//获取第一个Tr作为标题
var isie=document.all ? 'IE' : 'others';
//IE显示的是大写的tr,而FF显示的是小写的tr判断
if(isie=="IE")
var trarray=trlist.split('</TR>');
else
var trarray=trlist.split('</tr>');
//alert(trarray[0]);
var showtr=new Array();
var ds="";
for(i=0;i<trarray.length-1;i++)
{
showtr[i]=trarray[i]+"</tr>";
ds+=trarray[i]+"</tr>";
}
var code =showtr;
for(i=1;i<tablist;i++)
{
tablist[0].parentNode.innerHTML
}
var allpage=parseInt(code.length/n);
if(allpage<code.length/n)
{
allpage+=1;
}
var wpage,pcount;
if(page>=1)
{
wp=(page-1)*n;//(page-1)*n第几页开始数，(page-1)*n+n开始数加上每页数
pcount=wp+n;
}
else
{
wp=page*n;//(page)*n第几页开始数，(page)*n+n开始数加上每页数
pcount=wp+n;
page=1;//设置传递时第一页显示当前页面
}
//alert(allpage+"-"+page);
tb+="<table width='100'>"
tb+=trtitle;
for(var i=wp;i<pcount;i++)
{
if(code[i]==null)//如果值为空则不输出
break;
tb+=code[i];
}
tb+="</table>";
function setpage(allpage,page){//获取分页、当前页
palist="<div>";
//alert(page);
for(i=0;i<allpage;i++){
if(parseInt(i+1)!=page)
palist+="<a href='?p="+ parseInt(i+1)+"'>"+parseInt(i+1)+"</a>";
else
palist+="<em>"+ parseInt(i+1) +"</em>"
}
return palist+="</div>";
}
var ouput=tb+setpage(allpage,page);
document.write(ouput);
</script>
</body>
</html>
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)