本文實例講述了JavaScript分頁功能的實現方法。分享給大家供大家參考。具體實現方法如下：
<script>//定義page為全局變量，以便下面使用var page;window.onload = function() {var table = document.getElementById("table");var btnAdd = document.getElementById("btnAdd");var btnModify = document.getElementById("btnModify");var btnDel = document.getElementById("btnDel");var btnRefresh = document.getElementById("btnRefresh");var headCheck = document.getElementById("headCheck");//定義每頁的頁數及初始化table和tbody的idpage = new Page(5, 'table', 'sTBodyId');//初始加載init方法page.__init__();//初始更新表格page.__updateTableRows__();}//下面的所有方法，均寫到window.onload之外，否則運行有問題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;}//初始化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;} else if (iPageIndex < 0) {this.pageIndex = 0;} else {this.pageIndex = iPageIndex;}this.__updateTableRows__();}//執行分頁時，更新顯示表格內容Page.prototype.__updateTableRows__ = function() {//pageIndex初始化時為0//每頁顯示的數據*當前頁的索引var iCurrentRowCount = this.absolute * this.pageIndex;//如果截止到當前頁的所有數據+每頁顯示的數據>總數據條數，則還需要顯示this.absolute+ iCurrentRowCount - this.rowCount這些數據，否則，顯示0條數據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);//將tbody從table中移除var removedTBody = this.__oTable__.removeChild(this.__oTBody__);//重新創建tbodyvar newTBody = document.createElement("TBODY");//給他賦一個id值，為原來的id值newTBody.setAttribute("id", this.tBodyId);for (var i = 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() {var tempRows = [];//將當前body中的所有節點及其子節點都克隆一遍for (var i = 0; i < this.__dataRows__.length; i++) {tempRows[i] = this.__dataRows__[i].cloneNode(1);}return tempRows;}</script></head><body><!-- 這里有一個表格，內容隨意，供分頁使用 --><table width="100%" cellpadding="0" cellspacing="0" border="1"style="padding: 2"><tr><td colspan="3" align="center">總共：<%=connDataList.size()%>條記錄 每頁顯示5條 <a href="javascript:void(0);"onclick="page.firstPage();return false;">首頁</a> <ahref="javascript:void(0);" onclick="page.prePage();return false;">上一頁</a><a href="javascript:void(0);"onclick="page.nextPage();return false;">下一頁</a> <ahref="javascript:void(0);" onclick="page.lastPage();return false;">尾頁</a><span id="pageindex"></span></td></tr></table></body></html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
