非常簡單的相容多瀏覽器Javascript實現分頁功能
阿新 • • 發佈：2019-01-03
首先，建立一個page.js檔案，實現客戶端分頁的功能，程式碼如下：
/* * 客戶端分頁類 * @pageSize 每頁顯示記錄數 * @tableID 分頁表格ID * @tbodyID 分頁表格TBODY的ID */ /* 構造 */ function PagingClass(pageSize,tableID,tbodyID) { this._pageSize = pageSize; //每頁最大記錄數 this._tableId = tableID; this._tBodyId = tbodyID; this._rowCount = 0;//記錄數 this.pageCount = 0;//頁數 this.pageIndex = 0;//頁索引 this._curTable = null;//表格引用 this._curTBody = null;//要分頁內容 this._curRows = 0;//記錄行引用 this._oldTBody = null; this._initPaging(); //初始化; }; /* 初始化 */ PagingClass.prototype._initPaging = function(){ this._curTable = document.getElementById(this._tableId); this._curTBody = this._curTable.tBodies[this._tBodyId]; this._curRows = this._curTBody.rows; this._rowCount = this._curRows.length; try{ this._pageSize = (this._pageSize <= 0) || (this._pageSize>this._rowCount) ? this._rowCount : this._pageSize; this.pageCount = parseInt(this._rowCount%this._pageSize == 0 ? this._rowCount/this._pageSize : this._rowCount/this._pageSize+1); } catch(exception){} this._updateTableRows_(); }; /* 下一頁 */ PagingClass.prototype.nextPage = function(){ if(this.pageIndex + 1 < this.pageCount){ this.pageIndex += 1; this._updateTableRows_(); } }; /* 上一頁 */ PagingClass.prototype.prePage = function(){ if(this.pageIndex >= 1){ this.pageIndex -= 1; this._updateTableRows_(); } }; /* 首頁 */ PagingClass.prototype.firstPage = function(){ if(this.pageIndex != 0){ this.pageIndex = 0; this._updateTableRows_(); } }; /* 尾頁 */ PagingClass.prototype.lastPage = function(){ if(this.pageIndex+1 != this.pageCount){ this.pageIndex = this.pageCount - 1; this._updateTableRows_(); } }; /* 頁定位方法 */ PagingClass.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_(); }; /* 執行分頁時，更新顯示錶格內容 */ PagingClass.prototype._updateTableRows_ = function(){ var iCurrentRowCount = this._pageSize * this.pageIndex; var iMoreRow = this._pageSize+iCurrentRowCount > this._rowCount ? this._pageSize+iCurrentRowCount - this._rowCount : 0; var tempRows = this._cloneRows_(); var removedTBody = this._curTable.removeChild(this._curTBody); var newTBody = document.createElement("TBODY"); newTBody.setAttribute("id", this._tBodyId); for(var i=iCurrentRowCount; i < this._pageSize+iCurrentRowCount-iMoreRow; i++){ newTBody.appendChild(tempRows[i]); } this._curTable.appendChild(newTBody); this._curRows = tempRows; this._curTBody = newTBody; }; /* 克隆原始操作行集合 */ PagingClass.prototype._cloneRows_ = function(){ var tempRows = []; for(var i=0; i<this._curRows.length; i++){ tempRows[i] = this._curRows[i].cloneNode(1); } return tempRows; };
然後，建立一個html頁面，比如：
<table class="base_table" id="tbSeatList"> <thead> <tr> <th> 航空公司 </th> <th> 航線 </th> <th> 價格 </th> <th> 航班日期 </th> <th> 放位時間 </th> <th> 航班號 </th> <th> 放位數量 </th> <th> 記錄編號 </th> <th> 操作 </th> </tr> </thead> <tbody id="bodyPaging"> <tr> <td> 中國東方航空公司 </td> <td> 北京 → 上海 </td> <td> <span class="base_price"><dfn>¥</dfn>339</span> </td> <td> 2012-07-12 </td> <td> 2012-06-26 13:28 </td> <td> MU8888 </td> <td> 2 </td> <td> GBDDEE </td> <td> <a target="_blank" href=""> 檢視</a> </td> </tr> <tr> <td> 中國東方航空公司 </td> <td> 上海 → 成都 </td> <td> <span class="base_price"><dfn>¥</dfn>400</span> </td> <td> 2012-07-09 </td> <td> 2012-06-26 13:25 </td> <td> MU3333 </td> <td> 3 </td> <td> EFGDE </td> <td> <a target="_blank" href=""> 檢視</a> </td> </tr> <tr> <td> 中國東方航空公司 </td> <td> 上海 → 成都 </td> <td> <span class="base_price"><dfn>¥</dfn>400</span> </td> <td> 2012-07-12 </td> <td> 2012-06-26 13:23 </td> <td> MU2345 </td> <td> 2 </td> <td> PNR012 </td> <td> <a target="_blank" href=""> 檢視</a> </td> </tr> <tr> <td> 中國東方航空公司 </td> <td> 烏魯木齊 → 哈爾濱 </td> <td> <span class="base_price"><dfn>¥</dfn>360</span> </td> <td> 2012-07-25 </td> <td> 2012-06-26 11:28 </td> <td> mu0725 </td> <td> 3 </td> <td> 123 </td> <td> <a target="_blank" href=""> 檢視</a> </td> </tr> <tr> <td> 中國東方航空公司 </td> <td> 烏魯木齊 → 哈爾濱 </td> <td> <span class="base_price"><dfn>¥</dfn>360</span> </td> <td> 2012-07-03 </td> <td> 2012-06-26 11:06 </td> <td> mu0703 </td> <td> 2 </td> <td> 12 </td> <td> <a target="_blank" href=""> 檢視</a> </td> </tr> </tbody> </table> <br /> <div style="float:right;"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="javascript:void(0)" onclick="prePage();" style="color: Black;">上一頁</a> </td> <td> <span id="pageindex" style="font-weight: bold;"></span> </td> <td> <a href="javascript:void(0)" onclick="nextPage();" style="color: Black;">下一頁</a> </td> </tr> </table> </div>
最後，頁面的head部分新增以下js，呼叫分頁功能：
<script type="text/javascript" src="../JS/page.js"></script> <script type="text/javascript" language="javascript"> var page; window.onload = function () { if (document.getElementById('tbSeatList')) { page = new PagingClass(15, 'tbSeatList', 'bodyPaging'); document.getElementById('pageindex').innerHTML = page.pageIndex + 1 + ' / ' + page.pageCount; } }; function nextPage() { page.nextPage(); document.getElementById('pageindex').innerHTML = page.pageIndex + 1 + ' / ' + page.pageCount; } function prePage() { page.prePage(); document.getElementById('pageindex').innerHTML = page.pageIndex + 1 + ' / ' + page.pageCount; } </script>