JavaScript分页功能的实现方法
本文实例讲述了JavaScript分页功能的实现方法。分享给大家供大家参考。具体实现方法如下:
<script> //定义page为全局变量,以便下面使用 varpage; window.onload=function(){ vartable=document.getElementById("table"); varbtnAdd=document.getElementById("btnAdd"); varbtnModify=document.getElementById("btnModify"); varbtnDel=document.getElementById("btnDel"); varbtnRefresh=document.getElementById("btnRefresh"); varheadCheck=document.getElementById("headCheck"); //定义每页的页数及初始化table和tbody的id page=newPage(5,'table','sTBodyId'); //初始加载init方法 page.__init__(); //初始更新表格 page.__updateTableRows__(); } //下面的所有方法,均写到window.onload之外,否则运行有问题 functionPage(iAbsolute,sTableId,sTBodyId){ //每页显示数据的条数 this.absolute=iAbsolute; this.tableId=sTableId; this.tBodyId=sTBodyId; this.rowCount=0;//记录数 this.pageCount=0;//页数 this.pageIndex=0;//页索引 this.__oTable__=null;//表格引用 this.__oTBody__=null;//要分页内容 this.__dataRows__=0;//记录行引用 this.__oldTBody__=null; } //初始化 Page.prototype.__init__=function(){ //获取table引用 this.__oTable__=document.getElementById(this.tableId); //获取tBody引用 this.__oTBody__=this.__oTable__.tBodies[this.tBodyId]; //获取tbody的行 this.__dataRows__=this.__oTBody__.rows; //获取tbody的总行数 this.rowCount=this.__dataRows__.length; try{ //判断初始化时每页显示的数据条数,如果定义的值<0或者定义的值>本来就有的行数,那么初始化时显示本来的行数,否则为当前定义的行数 this.absolute=(this.absolute<=0) ||(this.absolute>this.rowCount)?this.rowCount :this.absolute; //定义初始化时该显示几页数据,也就是总页数 this.pageCount=parseInt(this.rowCount%this.absolute==0?this.rowCount /this.absolute :this.rowCount/this.absolute+1); }catch(exception){ } } //下一页 Page.prototype.nextPage=function(){ if(this.pageIndex+1<this.pageCount){ this.pageIndex+=1; this.__updateTableRows__(); } } //上一页 Page.prototype.prePage=function(){ if(this.pageIndex>=1){ this.pageIndex-=1; this.__updateTableRows__(); } } //首页 Page.prototype.firstPage=function(){ if(this.pageIndex!=0){ this.pageIndex=0; this.__updateTableRows__(); } } //尾页 Page.prototype.lastPage=function(){ if(this.pageIndex+1!=this.pageCount){ this.pageIndex=this.pageCount-1; this.__updateTableRows__(); } } //页定位方法 Page.prototype.aimPage=function(iPageIndex){ if(iPageIndex>this.pageCount-1){ this.pageIndex=this.pageCount-1; }elseif(iPageIndex<0){ this.pageIndex=0; }else{ this.pageIndex=iPageIndex; } this.__updateTableRows__(); } //执行分页时,更新显示表格内容 Page.prototype.__updateTableRows__=function(){ //pageIndex初始化时为0 //每页显示的数据*当前页的索引 variCurrentRowCount=this.absolute*this.pageIndex; //如果截止到当前页的所有数据+每页显示的数据>总数据条数,则还需要显示this.absolute+iCurrentRowCount-this.rowCount这些数据,否则,显示0条数据 variMoreRow=this.absolute+iCurrentRowCount>this.rowCount?this.absolute +iCurrentRowCount-this.rowCount :0; vartempRows=this.__cloneRows__(); //alert(tempRows===this.dataRows); //alert(this.dataRows.length); //将tbody从table中移除 varremovedTBody=this.__oTable__.removeChild(this.__oTBody__); //重新创建tbody varnewTBody=document.createElement("TBODY"); //给他赋一个id值,为原来的id值 newTBody.setAttribute("id",this.tBodyId); for(vari=iCurrentRowCount;i<this.absolute+iCurrentRowCount -iMoreRow;i++){ //重新给body添加节点 newTBody.appendChild(tempRows[i]); } //将新创建的tbody加到table中 this.__oTable__.appendChild(newTBody); /* this.dataRows为this.oTBody的一个引用, 移除this.oTBody那么this.dataRows引用将销失, code:this.dataRows=tempRows;恢复原始操作行集合. */ this.__dataRows__=tempRows; this.__oTBody__=newTBody; } //克隆原始操作行集合 Page.prototype.__cloneRows__=function(){ vartempRows=[]; //将当前body中的所有节点及其子节点都克隆一遍 for(vari=0;i<this.__dataRows__.length;i++){ tempRows[i]=this.__dataRows__[i].cloneNode(1); } returntempRows; } </script> </head> <body> <!--这里有一个表格,内容随意,供分页使用--> <tablewidth="100%"cellpadding="0"cellspacing="0"border="1" style="padding:2"> <tr> <tdcolspan="3"align="center">总共:<%=connDataList.size()%>条记录 每页显示5条 <ahref="javascript:void(0);" onclick="page.firstPage();returnfalse;">首页</a><a href="javascript:void(0);"onclick="page.prePage();returnfalse;">上一页</a> <ahref="javascript:void(0);" onclick="page.nextPage();returnfalse;">下一页</a><a href="javascript:void(0);"onclick="page.lastPage();returnfalse;">尾页</a> <spanid="pageindex"></span> </td> </tr> </table> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。