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程序设计有所帮助。