這篇文章主要介紹了JavaScript分頁功能的實現方法,涉及javascript操作分頁的相關技巧,需要的朋友可以參考下

本文實例講述了JavaScript分頁功能的實現方法。分享給大家供大家參考。具體實現方法如下：

1. <script> 
2. //定義page為全局變量，以便下面使用 
3. var page; 
4. window.onload = function() { 
5. var table = document.getElementById("table"); 
6. var btnAdd = document.getElementById("btnAdd"); 
7. var btnModify = document.getElementById("btnModify"); 
8. var btnDel = document.getElementById("btnDel"); 
9. var btnRefresh = document.getElementById("btnRefresh"); 
10. var headCheck = document.getElementById("headCheck"); 
11. //定義每頁的頁數及初始化table和tbody的id 
12. page = new Page(5, 'table', 'sTBodyId'); 
13. //初始加載init方法 
14. page.__init__(); 
15. //初始更新表格 
16. page.__updateTableRows__(); 
17. } 
18. //下面的所有方法，均寫到window.onload之外，否則運行有問題 
19. function Page(iAbsolute, sTableId, sTBodyId) { 
20. //每頁顯示數據的條數 
21. this.absolute = iAbsolute;  
22. this.tableId = sTableId; 
23. this.tBodyId = sTBodyId; 
24. this.rowCount = 0;//記錄數 
25. this.pageCount = 0;//頁數 
26. this.pageIndex = 0;//頁索引 
27. this.__oTable__ = null;//表格引用 
28. this.__oTBody__ = null;//要分頁內容 
29. this.__dataRows__ = 0;//記錄行引用 
30. this.__oldTBody__ = null; 
31. } 
32. //初始化 
33. Page.prototype.__init__ = function() { 
34. //獲取table引用 
35. this.__oTable__ = document.getElementById(this.tableId); 
36. //獲取tBody引用 
37. this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId]; 
38. //獲取tbody的行 
39. this.__dataRows__ = this.__oTBody__.rows; 
40. //獲取tbody的總行數 
41. this.rowCount = this.__dataRows__.length; 
42. try { 
43. //判斷初始化時每頁顯示的數據條數，如果定義的值<0或者定義的值>本來就有的行數，那么初始化時顯示本來的行數，否則為當前定義的行數 
44. this.absolute = (this.absolute <= 0) 
45. || (this.absolute > this.rowCount) ? this.rowCount 
46. : this.absolute; 
47. //定義初始化時該顯示幾頁數據，也就是總頁數 
48. this.pageCount = parseInt(this.rowCount % this.absolute == 0 ? this.rowCount 
49. / this.absolute 
50. : this.rowCount / this.absolute + 1); 
51. } catch (exception) { 
52. } 
53. } 
54. //下一頁 
55. Page.prototype.nextPage = function() { 
56.  
57. if (this.pageIndex + 1 < this.pageCount) { 
58. this.pageIndex += 1; 
59. this.__updateTableRows__(); 
60. } 
61. } 
62. //上一頁 
63. Page.prototype.prePage = function() { 
64. if (this.pageIndex >= 1) { 
65. this.pageIndex -= 1; 
66. this.__updateTableRows__(); 
67. } 
68. } 
69. //首頁 
70. Page.prototype.firstPage = function() { 
71. if (this.pageIndex != 0) { 
72. this.pageIndex = 0; 
73. this.__updateTableRows__(); 
74. } 
75. } 
76.  
77. //尾頁 
78. Page.prototype.lastPage = function() { 
79. if (this.pageIndex + 1 != this.pageCount) { 
80. this.pageIndex = this.pageCount - 1; 
81. this.__updateTableRows__(); 
82. } 
83. } 
84. //頁定位方法 
85. Page.prototype.aimPage = function(iPageIndex) { 
86. if (iPageIndex > this.pageCount - 1) { 
87. this.pageIndex = this.pageCount - 1; 
88. } else if (iPageIndex < 0) { 
89. this.pageIndex = 0; 
90. } else { 
91. this.pageIndex = iPageIndex; 
92. } 
93. this.__updateTableRows__(); 
94. } 
95. //執行分頁時，更新顯示表格內容 
96. Page.prototype.__updateTableRows__ = function() { 
97. //pageIndex初始化時為0 
98. //每頁顯示的數據*當前頁的索引 
99. var iCurrentRowCount = this.absolute * this.pageIndex; 
100. //如果截止到當前頁的所有數據+每頁顯示的數據>總數據條數，則還需要顯示this.absolute+ iCurrentRowCount - this.rowCount這些數據，否則，顯示0條數據 
101. var iMoreRow = this.absolute + iCurrentRowCount > this.rowCount ? this.absolute 
102. + iCurrentRowCount - this.rowCount 
103. : 0; 
104. var tempRows = this.__cloneRows__(); 
105. //alert(tempRows === this.dataRows); 
106. //alert(this.dataRows.length); 
107. //將tbody從table中移除 
108. var removedTBody = this.__oTable__.removeChild(this.__oTBody__); 
109. //重新創建tbody 
110. var newTBody = document.createElement("TBODY"); 
111. //給他賦一個id值，為原來的id值 
112. newTBody.setAttribute("id", this.tBodyId); 
113. for (var i = iCurrentRowCount; i < this.absolute + iCurrentRowCount 
114. - iMoreRow; i++) { 
115. //重新給body添加節點 
116. newTBody.appendChild(tempRows[i]); 
117. } 
118. //將新創建的tbody加到table中 
119. this.__oTable__.appendChild(newTBody); 
120. /* 
121. this.dataRows為this.oTBody的一個引用， 
122. 移除this.oTBody那么this.dataRows引用將銷失, 
123. code:this.dataRows = tempRows;恢復原始操作行集合. 
124. */ 
125. this.__dataRows__ = tempRows; 
126. this.__oTBody__ = newTBody; 
127. } 
128. //克隆原始操作行集合 
129. Page.prototype.__cloneRows__ = function() { 
130. var tempRows = []; 
131. //將當前body中的所有節點及其子節點都克隆一遍 
132. for (var i = 0; i < this.__dataRows__.length; i++) { 
133. tempRows[i] = this.__dataRows__[i].cloneNode(1); 
134. } 
135. return tempRows; 
136. } 
137. </script> 
138. </head> 
139. <body> 
140. <!-- 這里有一個表格，內容隨意，供分頁使用 --> 
141. <table width="100%" cellpadding="0" cellspacing="0" border="1" 
142. style="padding: 2"> 
143. <tr> 
144. <td colspan="3" align="center">總共：<%=connDataList.size()%>條記錄每頁顯示5條 
145. <a href="javascript:void(0);" 
146. onclick="page.firstPage();return false;">首頁</a> <a 
147. href="javascript:void(0);" onclick="page.prePage();return false;">上一頁</a> 
148. <a href="javascript:void(0);" 
149. onclick="page.nextPage();return false;">下一頁</a> <a 
150. href="javascript:void(0);" onclick="page.lastPage();return false;">尾頁</a> 
151. <span id="pageindex"></span> 
152. </td> 
153. </tr> 
154. </table> 
155. </body> 
156. </html> 

希望本文所述對大家的javascript程序設計有所幫助。