万能js实现翻页，兼容各种浏览器（已测试）----屌丝版！
来源：互联网 发布：孕囊第三个数据最大 编辑：程序博客网 时间：2024/05/16 12:47
本js实现翻页是我现在初学js弄着完所写，很老土但很实用，兼容各种浏览器（已测试！），可以适用于从数据库读取数据之后对其进行分页。
以下是用到的js，页面引用为：<script type="text/javascript" src="js/page.js"></script>
// JavaScript Documentvar curPage=1;//记录当前页码var pageCount=12;//默认每页显示12条function GetId(_obj) {//获取所显示的记录return document.getElementById(_obj);}function ChangePage(){ var pageNums=0; var recordNum=GetId("tabe").getElementsByTagName('tr').length-2;//获取当前共有多少条记录总数,因有第一条栏目名称和最后一条是翻页，所以要减去2var pageNumsOld=parseInt(recordNum%pageCount); var allRecords=GetId("tabe").getElementsByTagName('tr'); if(pageNumsOld!=0) { pageNums=parseInt(parseInt(recordNum)/pageCount)+1; } else{ pageNums=parseInt(parseInt(recordNum)/pageCount); }if((curPage==1)&&(recordNum>=pageCount))//默认显示第一页{var allRecords=GetId("tabe").getElementsByTagName('tr');//获取所有的内容for(var i=recordNum; i>pageCount; i--)//第一页显示前12条，12条之后的隐藏 {allRecords[i].className="thidden"; }}document.getElementById('pagenum').innerHTML=pageNums;//给总页数以及当前页码赋值document.getElementById('pagecount').innerHTML=recordNum;document.getElementById('showPage').value=1;//默认为第一页}function FirstPage()//首页{var pageNums=0; var recordNum=GetId("tabe").getElementsByTagName('tr').length-2;//获取当前共有多少条记录总数,因有第一条栏目名称和最后一条是翻页，所以要减去2 var pageNumsOld=parseInt(recordNum%pageCount); var allRecords=GetId("tabe").getElementsByTagName('tr'); if(pageNumsOld!=0) { pageNums=parseInt(parseInt(recordNum)/pageCount)+1; } else{ pageNums=parseInt(parseInt(recordNum)/pageCount); } var allRecords=GetId("tabe").getElementsByTagName('tr'); for(var i=recordNum; i>pageCount; i--) { allRecords[i].className="thidden"; } for(var i=0; i<=pageCount; i++) { allRecords[i].className="tshow"; } curPage=1; document.getElementById('showPage').value=1;}function LastPage()//尾页{var pageNums=0; var recordNum=GetId("tabe").getElementsByTagName('tr').length-2;//获取当前共有多少条记录总数,因有第一条栏目名称和最后一条是翻页，所以要减去2 var pageNumsOld=parseInt(recordNum%pageCount); var allRecords=GetId("tabe").getElementsByTagName('tr'); if(pageNumsOld!=0) { pageNums=parseInt(parseInt(recordNum)/pageCount)+1; if(recordNum>pageCount) { for(var i=recordNum; i>recordNum%pageCount; i--) //第一页显示12条 { allRecords[i].className="tshow"; } for(var i=recordNum-(recordNum%pageCount); i>0; i--) //第一页显示12条 { allRecords[i].className="thidden"; } } } else{ pageNums=parseInt(parseInt(recordNum)/pageCount); if(recordNum>pageCount) { for(var i=recordNum; i>recordNum-pageCount; i--) //第一页显示12条 { allRecords[i].className="tshow"; } for(var i=recordNum-pageCount; i>0; i--) //第一页显示12条 { allRecords[i].className="thidden"; } } } curPage=pageNums; document.getElementById('showPage').value=pageNums;}function PerPage()//上一页{var pageNums=0; var recordNum=GetId("tabe").getElementsByTagName('tr').length-2;//获取当前共有多少条记录总数,因有第一条栏目名称和最后一条是翻页，所以要减去2 var pageNumsOld=parseInt(recordNum%pageCount); var allRecords=GetId("tabe").getElementsByTagName('tr'); var currPage=parseInt(document.getElementById('showPage').value); if(pageNumsOld!=0) { pageNums=parseInt(parseInt(recordNum)/pageCount)+1; } else{ pageNums=parseInt(parseInt(recordNum)/pageCount); } if(currPage>1) { var perPages=(currPage-1)*pageCount; for(var i=perPages-pageCount;i<=perPages;i++) { allRecords[i].className="tshow"; } for(var i=allRecords.length-2; i>perPages; i--) //第一页显示12条 { allRecords[i].className="thidden"; } for(var i=0; i<perPages-pageCount; i++) //第一页显示12条 { allRecords[i].className="thidden"; } } currPage--; if(currPage>0) document.getElementById('showPage').value=currPage; }function NextPage()//下一页{var pageNums=0; var recordNum=GetId("tabe").getElementsByTagName('tr').length-2;//获取当前共有多少条记录总数,因有第一条栏目名称和最后一条是翻页，所以要减去2 var pageNumsOld=parseInt(recordNum%pageCount); var allRecords=GetId("tabe").getElementsByTagName('tr'); var currPage=parseInt(document.getElementById('showPage').value); if(pageNumsOld!=0) { pageNums=parseInt(parseInt(recordNum)/pageCount)+1; if(currPage<pageNums) { var frontPN=pageNums-1; if(currPage==frontPN) //此页是倒数第二页 { for(var i=recordNum; i>recordNum%pageCount; i--) { allRecords[i].className="tshow"; } for(var i=recordNum-(recordNum%pageCount); i>0; i--) { allRecords[i].className="thidden"; } document.getElementById('showPage').value=pageNums; } else{ var perPages=(currPage+1)*pageCount; for(var i=perPages-pageCount;i<perPages;i++) { allRecords[i].className="tshow"; } for(var i=recordNum; i>perPages; i--) //第一页显示12条 { allRecords[i].className="thidden"; } for(var i=0; i<perPages-pageCount; i++) //第一页显示12条 { allRecords[i].className="thidden"; } currPage++; if(currPage<pageNums) document.getElementById('showPage').value=currPage; } } } else{ pageNums=parseInt(parseInt(recordNum)/pageCount); if(currPage<pageNums) { var perPages=parseInt((currPage+1)*pageCount); for(var i=perPages-pageCount+1;i<=perPages;i++) { allRecords[i].className="tshow"; } for(var i=recordNum; i>perPages; i--) //第一页显示12条 { allRecords[i].className="thidden"; } for(var i=1; i<=perPages-pageCount; i++) //第一页显示12条 { allRecords[i].className="thidden"; } allRecords[0].className="tshow"; currPage++; if(currPage<=pageNums) document.getElementById('showPage').value=currPage; } }}function fastPage()//在input里面输入相应的页码，进行跳转{var pageNums=0; var recordNum=GetId("tabe").getElementsByTagName('tr').length-2;//获取当前共有多少条记录总数,因有第一条栏目名称和最后一条是翻页，所以要减去2 var pageNumsOld=parseInt(recordNum%pageCount); var allRecords=GetId("tabe").getElementsByTagName('tr'); var currPage=parseInt(document.getElementById('showPage').value); if(pageNumsOld!=0) { pageNums=parseInt(parseInt(recordNum)/pageCount)+1; if(currPage<=1) { for(var i=recordNum; i>pageCount; i--) { allRecords[i].className="thidden"; } for(var i=0; i<=pageCount; i++) { allRecords[i].className="tshow"; } currPage=1; document.getElementById('showPage').value=currPage; } else if(currPage>=pageNums) { for(var i=allRecords.length-2; i>recordNum%pageCount; i--) //第一页显示12条 { allRecords[i].className="tshow"; } for(var i=allRecords.length-2-(recordNum%pageCount); i>0; i--) //第一页显示12条 { allRecords[i].className="thidden"; } currPage=pageNums; document.getElementById('showPage').value=currPage; } else{ var perPages=currPage*pageCount; for(var i=perPages-pageCount;i<=perPages;i++) { allRecords[i].className="tshow"; } for(var i=allRecords.length-2; i>perPages; i--) //第一页显示12条 { allRecords[i].className="thidden"; } for(var i=0; i<perPages-pageCount; i++) //第一页显示12条 { allRecords[i].className="thidden"; } document.getElementById('showPage').value=currPage; } } else{ pageNums=parseInt(parseInt(recordNum)/pageCount); if(currPage<=1) { for(var i=recordNum; i>pageCount; i--) { allRecords[i].className="thidden"; } for(var i=0; i<=pageCount; i++) { allRecords[i].className="tshow"; } currPage=1; document.getElementById('showPage').value=currPage; } else if(currPage>=pageNums) { for(var i=recordNum; i>recordNum-pageCount; i--) //第一页显示12条 { allRecords[i].className="tshow"; } for(var i=recordNum-pageCount; i>0; i--) //第一页显示12条 { allRecords[i].className="thidden"; } currPage=pageNums; document.getElementById('showPage').value=currPage; } else{ var perPages=currPage*pageCount; for(var i=perPages-pageCount+1;i<=perPages;i++) { allRecords[i].className="tshow"; } for(var i=recordNum; i>perPages; i--) //第一页显示12条 { allRecords[i].className="thidden"; } for(var i=1; i<perPages-pageCount; i++) //第一页显示12条 { allRecords[i].className="thidden"; } allRecords[0].className="tshow"; document.getElementById('showPage').value=currPage; } }}以下是页面HTML代码：<!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=utf-8" /><title>无标题文档</title></head><script type="text/javascript"s src="../js/page.js"></script><body onload="ChangePage()"> <table cellspacing="0" cellpadding="0" class="tabe" id="tabe"> <tr> <th scope="col"><input type="checkbox" /></th> <th scope="col" onclick="ChangePage()">车牌号</th> <th scope="col">车系</th> <th scope="col">排量</th> <th scope="col">年限</th> <th scope="col">车主手机号</th> <th scope="col">现行里程KM</th> <th scope="col">预警提醒</th> <th scope="col">操作</th> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>1.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>2.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>3.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>4.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>5.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>6.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>7.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>8.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>9.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>10.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>11.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td><input type="checkbox" /></td> <td>京G00987</td> <td>宝来</td> <td>12.3L</td> <td>2013款</td> <td>13888888888</td> <td>20000</td> <td>距下次保养还有498km</td> <td class="bfont"><a href="">短信通知</a> <a href="nav_maintain1.html">保养记录</a></td> </tr> <tr> <td colspan="11" style=" background:#DDF4F6; line-height:32px;"><span class="fan" style="padding:0;"> <a href="#" onclick="FirstPage()">首页</a> <span style="cursor:pointer;" onclick="PerPage()">◀</span> <span><span>第</span> <input value="1" type="text" class="fan_ye" id="showPage" onchange="fastPage()" /> <span>页</span></span> <span style="cursor:pointer;" onclick="NextPage()">▶</span> <a href="#" onclick="LastPage()">尾页</a> <span>共 <span id="pagenum">2</span>页 <span id="pagecount">24</span>条</span> </span></td> </tr> </table> <script type="text/javascript"><!-- 此处作用是对鼠标经过的tr进行颜色改变 --> var obj=document.getElementById("tabe"); for(var i=0;i<obj.rows.length;i++){ obj.rows[i].onmouseover=function(){this.style.background="#FFFF99";} obj.rows[i].onmouseout=function(){this.style.background="";} }</script> </body></html>以下是CSS样式：.tabe { line-height: 16px; collapse:collapse; width:914px; height:auto; border: solid 1px #c1c1c1; text-align:center;}.tabe td{ collapse:collapse; border: solid 1px #c1c1c1;}.tshow{}.thidden{display:none;}以下是运行效果：
PS：小注：
可能有些同学会疑问，
var recordNum=GetId("tabe").getElementsByTagName('tr').length-2;
var pageNums=parseInt(recordNum/pageCount)+1;
这两行代码，每个都用到了，为什么不设置成全局变量？
因为这个版本是在页面呈现出来之前就要对所有内容进行分页，如果设置成全局变量，ChangePage()初始时将无法让其只显示12条。
本人只是初学，写的代码也不完善，如果有各位大神的指教或者一些同学有疑问，请加QQ：1740437 欢迎进行技术交流！
- 万能js实现翻页，兼容各种浏览器（已测试）----屌丝版！
- 万能js实现翻页，动态生成内容自动翻页，兼容各种浏览器（已测试）----神器版！
- 浏览器兼容神功之一：万能的js
- 纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)
- 实现浏览器全屏(兼容各种浏览器)
- JS生成二维码(兼容各种浏览器及中文）
- JS生成二维码(兼容各种浏览器及中文）
- js操作iframe兼容各种浏览器
- js 实现文字无缝滚动(图片无缝滚动) 兼容各种浏览器
- js 实现文字无缝滚动(图片无缝滚动) 兼容各种浏览器
- js+java实现的头像上传和裁剪，完美兼容各种浏览器
- 不用JS实现显示隐藏效果（兼容各浏览器）
- js实现软键盘（兼容所有浏览器）
- js实现表格排序（兼容各浏览器）
- js实现Enter键提交表单（兼容各个浏览器）
- 兼容浏览器的js Ajax实现
- JS 实现 ajax 异步 兼容浏览器
- 图片本地预览（兼容各种浏览器）
- UVa 532Dungeon Master
- ThinkPHP3.1快速入门连贯操作
- poj 1840
- 简单快速打印100以内的素数
- Android程序调试时生成main.out.xml文件
- 万能js实现翻页，兼容各种浏览器（已测试）----屌丝版！
- 数据库中，如何通过表名获取表的字段名（属性名）？
- WebBrowser 在多线程中，无法释放内存
- 深度探析如何提高Web表单的可用性
- Tornado的初步了解
- 【转】让你提升命令行效率的 Bash 快捷键
- Cocos2d-x 自定义动画
- jQuery中的animate的应用（图片的自动移动）
- cpp const关键字
