JavaScript分页功能的实现方法

这篇文章主要介绍了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程序设计有所帮助。