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

来源：互联网发布：完美软件编辑：程序博客网时间：2024/05/18 23:57

单纯的JS实现分页

先来说说思路：

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

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

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

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

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

下面是JS代码

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方法里面可以传值的话可以传值然后定义成一个公共的方法也不错

下面是上传的一个事例

0 0