標籤：style blog http color java io for ar
// JavaScript Document/**//*** js分頁類* @param iAbsolute 每頁顯示記錄數* @param sTableId 分頁表格屬性ID值，為String* @param sTBodyId 分頁表格TBODY的屬性ID值,為String,此項為要分頁的主體內容* @Version 1.0.0* @author 辛現寶 2007-01-15 created* var __variable__; private* function __method__(){};private*/function Page(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;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.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;}else if(iPageIndex < 0){this.pageIndex = 0;}else{this.pageIndex = iPageIndex;}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__();//alert(tempRows === this.dataRows);//alert(this.dataRows.length);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為this.oTBody的一個引用，移除this.oTBody那麼this.dataRows引用將銷失,code:this.dataRows = tempRows;恢複原始操作行集合.*/this.__dataRows__ = tempRows;this.__oTBody__ = newTBody;//alert(this.dataRows.length);//alert(this.absolute+iCurrentRowCount);//alert("tempRows:"+tempRows.length);};/**//*複製原始操作行集合*/Page.prototype.__cloneRows__ = function(){var tempRows = [];for(var i=0; i<this.__dataRows__.length; i++){/**//*code:this.dataRows[i].cloneNode(param), param = 1 or true:複製以指定節點發展出去的所有節點,param = 0 or false:只有指定的節點和它的屬性被複製.*/tempRows[i] = this.__dataRows__[i].cloneNode(1);}return tempRows;};
例子
<!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=gb2312" /><title>無標題文檔</title><script type="text/javascript" language="javascript">window.onload = function(){page = new Page(3,‘table1‘,‘group_one‘); };</script></head><body><table id="table1" border="0" width="486"><thead><tr style="background-color:#CCCCCC;"><th style="cursor:pointer;">Last Name</th><th style="cursor:pointer;">First Name</th><th style="cursor:pointer;">Birthday</th><th style="cursor:pointer;">Siblings</th></tr></thead><tbody id="group_one"><tr style="background-color:#f3f3f3"><td>Smith</td><td>John</td><td>7/12/1978</td><td>2</td></tr><tr style="background-color:#B4D6FC"><td>Johnson</td><td>Betty</td><td>10/15/1977</td><td>4</td></tr><tr style="background-color:#f3f3f3"><td>Henderson</td><td>Nathan</td><td>2/25/1949</td><td>1</td></tr><tr style="background-color:#B4D6FC"><td>Williams</td><td>James</td><td>7/8/1980</td><td>4</td></tr><tr style="background-color:#f3f3f3"><td>Gilliam</td><td>Micheal</td><td>7/22/1949</td><td>1</td></tr><tr style="background-color:#f3f3f3"><td>Smith</td><td>John</td><td>7/12/1978</td><td>2</td></tr><tr style="background-color:#B4D6FC"><td>Johnson</td><td>Betty</td><td>10/15/1977</td><td>4</td></tr><tr style="background-color:#f3f3f3"><td>Henderson</td><td>Nathan</td><td>2/25/1949</td><td>1</td></tr><tr style="background-color:#B4D6FC"><td>Williams</td><td>James</td><td>7/8/1980</td><td>4</td></tr><tr style="background-color:#f3f3f3"><td>Gilliam</td><td>Micheal</td><td>7/22/1949</td><td>1</td></tr></tbody></table><span id="s"></span><table>
<tr>
<td><a href="#" onclick="page.nextPage();">下一頁</a></td>
<td><a href="#" onclick="page.prePage();">上一頁</a></td>
<td><span id="pageindex"></span></td>
</tr>
</table></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
