javascript實作表格分頁

javascript瀹??拌〃?煎??椤?

<!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>?

<title>????搴?绠＄??</title>?

<script>?

function Page(iAbsolute,sTableId,sTBodyId,page)?

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;?

this.__init__(); //??濮???;?

};?

Page.prototype.__init__ = function(){?

this.__oTable__ = document.getElementById(this.tableId);//?峰??table寮????

this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];//?峰??tBody寮????

this.__dataRows__ = this.__oTBody__.rows;?

this.rowCount = this.__dataRows__.length;?

try{?

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){}?

this.__updateTableRows__();?

};?

Page.prototype.GetBar=function(obj)?

var bar= document.getElementById(obj.id);?

bar.innerHTML= "姣?椤?+this.absolute+"????+this.rowCount+"??;// 绗?2椤???椤?棣?椤?涓?涓?椤?1 2 3 4 5 6 涓?涓?椤???椤德?

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(){?

var abc = document.getElementById("pageno");?

var iPageIndex = abc.value;?

var iPageIndex = iPageIndex*1;?

if(iPageIndex > this.pageCount-1){?

this.pageIndex = this.pageCount -1;?

}else if(iPageIndex < 0){?

this.pageIndex = 0;?

}else{?

this.pageIndex = iPageIndex-1;?

this.__updateTableRows__();?

};?

Page.prototype.__updateTableRows__ = function(){?

var iCurrentRowCount = this.absolute * this.pageIndex;?

var iMoreRow = this.absolute+iCurrentRowCount > this.rowCount ? this.absolute+iCurrentRowCount - this.rowCount : 0;?

var tempRows = this.__cloneRows__();?

var removedTBody = this.__oTable__.removeChild(this.__oTBody__);?

var newTBody = document.createElement("TBODY");?

newTBody.setAttribute("id", this.tBodyId);?

for(var i=iCurrentRowCount; i < this.absolute+iCurrentRowCount-iMoreRow; i++){?

newTBody.appendChild(tempRows[i]);?

this.__oTable__.appendChild(newTBody);?

this.__dataRows__ = tempRows;?

this.__oTBody__ = newTBody;?

//椤佃???劇ず???

var divFood = document.getElementById("divFood");//??椤靛伐?鋒???

divFood.innerHTML="";?

var rightBar = document.createElement("divFood");?

rightBar.setAttribute("display","");?

rightBar.setAttribute("float","left");?

rightBar.innerHTML="绗?"+(this.pageIndex+1)+"椤???+this.pageCount+"椤?;?

var isOK="Y";?

var cssColor="";?

divFood.appendChild(rightBar);?

椤佃???劇ず??椤電??

};?

Page.prototype.__cloneRows__ = function(){?

var tempRows = [];?

for(var i=0; i<this.__dataRows__.length; i++){?

tempRows[i] = this.__dataRows__[i].cloneNode(1);?

return tempRows;?

};?

</script>?

window.onload = function(){?

page = new Page(3,'senfe','group_one'); };?

</script>?

#senfe {?

border-top: #000 1px solid;?

border-left: #000 1px solid;?

#senfe td {?

border-right: #000 1px solid;?

border-bottom: #000 1px solid;?

--></style>?

function senfe(o,a,b,c,d){?

var t=document.getElementById(o).getElementsByTagName("tr");?

for(var i=0;i<t.length;i++){?

t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;?

--></script>?

</head>?

<body>?

<div>?

<table cellpadding="0" cellspacing="0" bordercolor="#006600" id="senfe">?

<thead>?

<tr align="center" valign="middle">?

<td width="46" height="23" bgcolor="#FFFFFF">缂???lt;/td>?

<td width="71" bgcolor="#FFFFFF"><select name="select" dir="ltr">?

<option>濂?绫誨??</option>?

<option>A濂?</option>?

<option>B濂?</option>?

</select></td>?

<td width="53" bgcolor="#FFFFFF">??绉?lt;/td>?

<td width="53" bgcolor="#FFFFFF">?伴??</td>?

<td width="53" bgcolor="#FFFFFF">??浠?lt;/td>?

<td width="95" bgcolor="#FFFFFF"><select name="select" dir="ltr">?

<option>??浣?</option>?

<option>涓?</option>?

<option>??</option>?

</select></td>?

<td width="80" bgcolor="#FFFFFF">??搴???绉?lt;/td>?

<td width="35" bgcolor="#FFFFFF">澶?娉?lt;/td>?

</tr>?

</thead>?

<tbody id="group_one">?

<tr>?

<td>1</td>?

<td> </td>?

</tr>?

<tr>?

<td>2</td>?

<td> </td>?

</tr>?

<tr>?

<td>3</td>?

<td> </td>?

</tr>?

<tr>?

<td>4</td>?

<td> </td>?

</tr>?

<tr>?

<td>5</td>?

<td> </td>?

</tr>?

<tr>?

<td>6</td>?

<td> </td>?

</tr>?

<tr>?

<td>7</td>?

<td> </td>?

</tr>?

<tr>?

<td>8</td>?

<td> </td>?

</tr>?

<tr>?

<td>9</td>?

<td> </td>?

</tr>?

</tbody>?

</table>?

//senfe("琛ㄦ?煎??绉?,"濂??拌?????","?舵?拌?????","榧???缁?杩?????","?瑰?誨??????");?

senfe("senfe","#fff","#ccc","#cfc","#f00");?

--></script>?

</div>?

<div><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 慰nclick="page.firstPage();">棣? 椤?lt;/a>/<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 慰nclick="page.nextPage();">涓?涓?椤?lt;/a>/<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 慰nclick="page.prePage();">涓?涓?椤?lt;/a>/<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 慰nclick="page.lastPage();">?? 椤?lt;/a><span id="divFood">?

</span>?

/绗??

<input id="pageno" value="1" style="width:20px"/>椤?<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 慰nclick="page.aimPage();">璺寵漿</a></div>?

</div>?

</body>?

</html>