JS 实现简单的Table表格分页效果（假分页）

单纯的JS实现分页

先来说说思路：

1.就是 window.onload的时候 调用方法 进行主页的分页

这里 要先获取 表格的总行数 然后在减去 表格 的头部 和尾部等其他一些 没有存储数据的行数

先把所有的数据行根据根据TR的 ID 样式都调整为 隐藏 （注意 这边的ID 是连贯格式的 比如 id=“TR1 2 3 。。。。” 这可以适用于一些用C：for 循环出来的数据 ）

2.在 根据你所设置的 页面的大小 pageSize 循环显示出来想要的列

3.根据上面的思路可以 写一个总的方法 让 上一页 或者下一页 调用 根据算法 算一下要显示的页数的条数就好了

下面是JS代码

var rowCurrent=1;//当前页码

var rowSize=10;//每页显示的记录数

var rows;//总行数

var rowCurrent;//

function accp(id,rowDuo){

var tab = document.getElementById("accp") ;

//表格行数

rows = tab.rows.length ;

document.getElementById("spanCount").innerHTML=rows*1-2;//这是table里面总行数-不是数据的那两行的个数 得到是数据的总行数

document.getElementById("spanSize").innerHTML=Math.ceil((rows*1-2)/rowSize);//总页数

pagez(rowCurrent);

document.getElementById("spanD").innerHTML=rowCurrent;

}

function pagez(rowCurrent1){



for(var i=0;i<(rows*1-2);i++){

var row = document.getElementById("tr"+i) ;

row.style.display="none";

}

var s=1;

for(var i=rowSize*(rowCurrent1-1);i<rowSize*rowCurrent1;i++){

var a=document.getElementById("spanSize").innerHTML*1;

var a1=document.getElementById("spanCount").innerHTML*1%rowSize;

if(rowCurrent1==a){

if(s>a1){

return;

}

s=s+1;

}

var row = document.getElementById("tr"+i) ;

row.style.display="block";

}

}

function page(accp){

if(accp=="X"){

var rowCurrent1=rowCurrent+1;

var a=document.getElementById("spanSize").innerHTML*1;

if(rowCurrent1>a){

alert("已经是最后一页！");

return;

}else{

rowCurrent=rowCurrent1;

pagez(rowCurrent1);

}

}

if(accp=="S"){

rowCurrent1=rowCurrent-1;

var a=document.getElementById("spanSize").innerHTML*1;

if(rowCurrent1<=0){

alert("已经是首页了！");

return;

}else{

rowCurrent=rowCurrent1;

pagez(rowCurrent1);

}

}

if(accp=="SO"){

rowCurrent1=1;

rowCurrent=1;

pagez(rowCurrent1);

}

if(accp=="M"){

rowCurrent1=document.getElementById("spanSize").innerHTML*1;

rowCurrent=rowCurrent1;

pagez(rowCurrent1);

}

if(accp=="T"){

var a=document.getElementById("pageno").value*1;//获取文本框数值

var a1=document.getElementById("spanSize").innerHTML*1;//获取最大的页数

if(a>a1){

alert("没有这么多页！");

}else{

rowCurrent1=a;

rowCurrent=a;

pagez(rowCurrent1);

}

}

document.getElementById("spanD").innerHTML=rowCurrent;

document.getElementById("pageno").value=rowCurrent;

}

window.onload=accp;

HTML 代码

<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="3C556B" style="border-collapse:collapse ">

<tr>

<td height="120" valign="top" bgcolor="ADD4DD">

<table id="accp" width="100%" border="0" align="center" cellpadding="3" cellspacing="1">

<tr align="center" bgcolor="E8F3F9">

<td width="50" height="35" bgcolor="E8F3F9" class="font3">序号</td>

<td><span class="font3">姓名</span></td>

<td><span class="font3">登录名</span></td>

<td><span class="font3">密码</span></td>

<td><span class="font3">状态</span></td>

<td><span class="font3">创建时间</span></td>

<td><span class="font3">操作</span></td>

</tr>

<tr id="tr0" class="Bg7" >

<td align="center">1</td>

<td>王武



</td>

<td align="center">wangwu</td>

<td align="center">0xa3c58f914288819fcdb414b7dca66cb9</td>

<td align="center">1</td>

<td align="center">2014-08-19</td>

<td align="center">

<a href="/SpringDemo/user/edit/6"><img style="border:0px" src="/SpringDemo/images/btn_edit.gif" alt="修改" title="修改" ></a>

<a onClick="removeUser(6, '王武')" href="#"><img style="border:0px" src="/SpringDemo/images/btn_delete.gif" lt="删除" title="删除" ></a>

</td>

</tr>

<tr id="tr1" class="Bg6">

<td align="center">2</td>

<td>李进



</td>

<td align="center">lijin</td>

<td align="center">0xce0bfd15059b68d67688884d7a3d3e8c</td>

<td align="center">1</td>

<td align="center">2014-08-19</td>

<td align="center">

<a href="/SpringDemo/user/edit/7"><img style="border:0px" src="/SpringDemo/images/btn_edit.gif" alt="修改" title="修改" ></a>

<a onClick="removeUser(7, '李进')" href="#"><img style="border:0px" src="/SpringDemo/images/btn_delete.gif" lt="删除" title="删除" ></a>

</td>

</tr>

中间省略一部分代码

<tr id="tr20" class="Bg7">

<td align="center">21</td>

<td>武松



</td>

<td align="center">wusong</td>

<td align="center">0x8514f78856814a0cc0773868679bc948</td>

<td align="center">1</td>

<td align="center">2014-08-21</td>

<td align="center">

<a href="/SpringDemo/user/edit/26"><img style="border:0px" src="/SpringDemo/images/btn_edit.gif" alt="修改" title="修改" ></a>

<a onClick="removeUser(26, '武松')" href="#"><img style="border:0px" src="/SpringDemo/images/btn_delete.gif" lt="删除" title="删除" ></a>

</td>

</tr>

<tr>

<td align="center" valign="top" height="42" colspan="4">

共<span id="spanCount"></span>条 ，

共<span id="spanD"></span>/<span id="spanSize"></span>页

<a href="#" onclick="page('SO')">首 页</a>/

<a href="#" onclick="page('X')">下一页</a>/

<a href="#" onclick="page('S')">上一页</a>/

<a href="#" onclick="page('M')">末 页</a><span id="divFood">

</span>

/第 <input type="text" id="pageno" value="1" style="width:20px"/>页/

<a href="#" onclick="page('T')">跳转</a></div>

</td>

<td align="right" height="42" colspan="2">

<img alt="新增用户"

src="/SpringDemo/images/yh_new.png"

style="cursor:pointer;"

onClick="javascript:location.href='/SpringDemo/user/add';"

height="30" />

</td>

</tr>

</table>

这样最简单的JS实现的分页就好了

下面 我们 来说说 他的缺点 ：

1.不能复用（如果一个页面有两个table 那么 他就要从新写一个新的JS 不过 还是可以解决的 自己慢慢研究 由于时间的原因我就不研究了）

2.每个ID 都要定义的相当明确 如果漏了一个 就不行了

3. 有些地方代码 比较反锁 （朋友们可以优化一下）

在 页面的onload方法里面可以传值的话 可以传值 然后定义成一个公共的方法 也不错

下面是上传的一个事例