JavaScript分頁功能的實現方法
這篇文章主要介紹了JavaScript分頁功能的實現方法,涉及javascript操作分頁的相關技巧,需要的朋友可以參考下
本文實例講述了JavaScript分頁功能的實現方法。分享給大家供大家參考。具體實現方法如下：
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 <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的id page = 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__); //重新創建tbody var 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> <a href="javascript:void(0);" onclick="page.prePage();return false;">上一頁</a> <a href="javascript:void(0);" onclick="page.nextPage();return false;">下一頁</a> <a href="javascript:void(0);" onclick="page.lastPage();return false;">尾頁</a> <span id="pageindex"></span> </td> </tr> </table> </body> </html>希望本文所述對大家的javascript程序設計有所幫助。