天天看點
傳回

HTML靜态表格分頁（通過JS實作）

html?浠ｇ?? ?

  1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??
  2. <html?xmlns="http://www.w3.org/1999/xhtml">??
  3. <head>??
  4. <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>??
  5. <title>????棰???妗?lt;/title>??
  6. </head>??
  7. ??
  8. <body>??
  9. <span?id="spanFirstt">绗?涓?椤?lt;/span>?<span?id="spanPret">涓?涓?椤?lt;/span>?<span?id="spanNextt">涓?涓?椤?lt;/span>?<span?id="spanLastt">????涓?椤?lt;/span>?绗?<span?id="spanPageNumt"></span>椤???lt;span?id="spanTotalPaget"></span>椤???
  10. <table?width="500"?border="0"?cellpadding="5"?cellspacing="1"?bgcolor="#999999">??
  11. <tr>??
  12. ????<th?colspan="5">lishewen</th>??
  13. </tr>??
  14. <tbody?id="tablelsw">??
  15. ??<tr>??
  16. ????<td?bgcolor="#FFFFFF">1</td>??
  17. ????<td?bgcolor="#FFFFFF">绠?绁?</td>??
  18. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  19. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  20. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  21. ??</tr>??
  22. ??<tr>??
  23. ????<td?bgcolor="#FFFFFF">2</td>??
  24. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  25. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  26. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  27. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  28. ??</tr>??
  29. ??<tr>??
  30. ????<td?bgcolor="#FFFFFF">3</td>??
  31. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  32. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  33. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  34. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  35. ??</tr>??
  36. ??<tr>??
  37. ????<td?bgcolor="#FFFFFF">4</td>??
  38. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  39. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  40. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  41. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  42. ??</tr>??
  43. ??<tr>??
  44. ????<td?bgcolor="#FFFFFF">5</td>??
  45. ????<td?bgcolor="#FFFFFF">榛?????</td>??
  46. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  47. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  48. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  49. ??</tr>??
  50. ??<tr>??
  51. ????<td?bgcolor="#FFFFFF">6</td>??
  52. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  53. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  54. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  55. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  56. ??</tr>??
  57. ??<tr>??
  58. ????<td?bgcolor="#FFFFFF">7</td>??
  59. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  60. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  61. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  62. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  63. ??</tr>??
  64. ??<tr>??
  65. ????<td?bgcolor="#FFFFFF">8</td>??
  66. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  67. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  68. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  69. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  70. ??</tr>??
  71. ??<tr>??
  72. ????<td?bgcolor="#FFFFFF">9</td>??
  73. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  74. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  75. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  76. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  77. ??</tr>??
  78. ??<tr>??
  79. ????<td?bgcolor="#FFFFFF">10</td>??
  80. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  81. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  82. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  83. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  84. ??</tr>??
  85. ??<tr>??
  86. ????<td?bgcolor="#FFFFFF">11</td>??
  87. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  88. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  89. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  90. ????<td?bgcolor="#FFFFFF">&nbsp;</td>??
  91. ??</tr>??
  92. ??</tbody>??
  93. </table>??
  94. <span?id="spanFirst">绗?涓?椤?lt;/span>?<span?id="spanPre">涓?涓?椤?lt;/span>?<span?id="spanNext">涓?涓?椤?lt;/span>?<span?id="spanLast">????涓?椤?lt;/span>?绗?<span?id="spanPageNum"></span>椤???lt;span?id="spanTotalPage"></span>椤???
  95. <!-- ?
  96. ????<script?language="javascript"?src="Paging.js"></script> ?
  97. -->??
  98. </body>??
  99. </html>??
  100. <script>??
  101. //?JavaScript?Document?By?lishewen ??
  102. var?theTable?=?document.getElementById("tablelsw"); ??
  103. var?totalPage?=?document.getElementById("spanTotalPage"); ??
  104. var?pageNum?=?document.getElementById("spanPageNum"); ??
  105. ??
  106. var?spanPre?=?document.getElementById("spanPre"); ??
  107. var?spanNext?=?document.getElementById("spanNext"); ??
  108. var?spanFirst?=?document.getElementById("spanFirst"); ??
  109. var?spanLast?=?document.getElementById("spanLast"); ??
  110. ??
  111. var?totalPaget?=?document.getElementById("spanTotalPaget"); ??
  112. var?pageNumt?=?document.getElementById("spanPageNumt"); ??
  113. ??
  114. var?spanPret?=?document.getElementById("spanPret"); ??
  115. var?spanNextt?=?document.getElementById("spanNextt"); ??
  116. var?spanFirstt?=?document.getElementById("spanFirstt"); ??
  117. var?spanLastt?=?document.getElementById("spanLastt"); ??
  118. ??
  119. var?numberRowsInTable?=?theTable.rows.length; ??
  120. var?pageSize?=?4; ??
  121. var?page?=?1; ??
  122. ??
  123. //涓?涓?椤???
  124. function?next(){ ??
  125. ??
  126. ????hideTable(); ??
  127. ???? ??
  128. ????currentRow?=?pageSize?*?page; ??
  129. ????maxRow?=?currentRow?+?pageSize; ??
  130. ????if?(?maxRow?>?numberRowsInTable?)?maxRow?=?numberRowsInTable; ??
  131. ????for?(?var?i?=?currentRow;?i<?maxRow;?i++?){ ??
  132. ????????theTable.rows[i].style.display?=?''; ??
  133. ????} ??
  134. ????page++; ??
  135. ???? ??
  136. ????if?(?maxRow?==?numberRowsInTable?)?{?nextText();?lastText();?} ??
  137. ????showPage(); ??
  138. ????preLink(); ??
  139. ????firstLink(); ??
  140. } ??
  141. ??
  142. //涓?涓?椤???
  143. function?pre(){ ??
  144. ??
  145. ????hideTable(); ??
  146. ???? ??
  147. ????page--; ??
  148. ???? ??
  149. ????currentRow?=?pageSize?*?page; ??
  150. ????maxRow?=?currentRow?-?pageSize; ??
  151. ????if?(?currentRow?>?numberRowsInTable?)?currentRow?=?numberRowsInTable; ??
  152. ????for?(?var?i?=?maxRow;?i<?currentRow;?i++?){ ??
  153. ????????theTable.rows[i].style.display?=?''; ??
  154. ????} ??
  155. ???? ??
  156. ???? ??
  157. ????if?(?maxRow?==?0?){?preText();?firstText();?} ??
  158. ????showPage(); ??
  159. ????nextLink(); ??
  160. ????lastLink(); ??
  161. } ??
  162. ??
  163. //绗?涓?椤???
  164. function?first(){ ??
  165. ????hideTable(); ??
  166. ????page?=?1; ??
  167. ????for?(?var?i?=?0;?i<pageSize;?i++?){ ??
  168. ????????theTable.rows[i].style.display?=?''; ??
  169. ????} ??
  170. ????showPage(); ??
  171. ???? ??
  172. ????preText(); ??
  173. ????nextLink(); ??
  174. ????lastLink(); ??
  175. } ??
  176. ??
  177. //????涓?椤???
  178. function?last(){ ??
  179. ????hideTable(); ??
  180. ????page?=?pageCount(); ??
  181. ????currentRow?=?pageSize?*?(page?-?1); ??
  182. ????for?(?var?i?=?currentRow;?i<numberRowsInTable;?i++?){ ??
  183. ????????theTable.rows[i].style.display?=?''; ??
  184. ????} ??
  185. ????showPage(); ??
  186. ???? ??
  187. ????preLink(); ??
  188. ????nextText(); ??
  189. ????firstLink(); ??
  190. } ??
  191. ??
  192. function?hideTable(){ ??
  193. ????for?(?var?i?=?0;?i<numberRowsInTable;?i++?){ ??
  194. ????????theTable.rows[i].style.display?=?'none'; ??
  195. ????} ??
  196. } ??
  197. ??
  198. function?showPage(){ ??
  199. ????pagepageNum.innerHTML?=?page; ??
  200. ????pagepageNumt.innerHTML?=?page; ??
  201. } ??
  202. ??
  203. //?誨?遍〉????
  204. function?pageCount(){ ??
  205. ????var?count?=?0; ??
  206. ????if?(?numberRowsInTable%pageSize?!=?0?)?count?=?1;? ??
  207. ????return?parseInt(numberRowsInTable/pageSize)?+?count; ??
  208. } ??
  209. ??
  210. //?劇ず?炬????
  211. function?preLink(){?spanPre.innerHTML?=?"<a?href='javascript:pre();'>涓?涓?椤?lt;/a>";?spanPret.innerHTML?=?"<a?href='javascript:pre();'>涓?涓?椤?lt;/a>";} ??
  212. function?preText(){?spanPre.innerHTML?=?"涓?涓?椤?;?spanPret.innerHTML?=?"涓?涓?椤?;?} ??
  213. ??
  214. function?nextLink(){?spanNext.innerHTML?=?"<a?href='javascript:next();'>涓?涓?椤?lt;/a>";?spanNextt.innerHTML?=?"<a?href='javascript:next();'>涓?涓?椤?lt;/a>";} ??
  215. function?nextText(){?spanNext.innerHTML?=?"涓?涓?椤?;?spanNextt.innerHTML?=?"涓?涓?椤?;} ??
  216. ??
  217. function?firstLink(){?spanFirst.innerHTML?=?"<a?href='javascript:first();'>绗?涓?椤?lt;/a>";?spanFirstt.innerHTML?=?"<a?href='javascript:first();'>绗?涓?椤?lt;/a>";} ??
  218. function?firstText(){?spanFirst.innerHTML?=?"绗?涓?椤?;?spanFirstt.innerHTML?=?"绗?涓?椤?;} ??
  219. ??
  220. function?lastLink(){?spanLast.innerHTML?=?"<a?href='javascript:last();'>????涓?椤?lt;/a>";?spanLastt.innerHTML?=?"<a?href='javascript:last();'>????涓?椤?lt;/a>";} ??
  221. function?lastText(){?spanLast.innerHTML?=?"????涓?椤?;?spanLastt.innerHTML?=?"????涓?椤?;} ??
  222. ??
  223. //????琛ㄦ????
  224. function?hide(){ ??
  225. ????for?(?var?i?=?pageSize;?i<numberRowsInTable;?i++?){ ??
  226. ????????theTable.rows[i].style.display?=?'none'; ??
  227. ????} ??
  228. ???? ??
  229. ????totalPage.innerHTML?=?pageCount(); ??
  230. ????pageNum.innerHTML?=?'1'; ??
  231. ???? ??
  232. ????totalPaget.innerHTML?=?pageCount(); ??
  233. ????pageNumt.innerHTML?=?'1'; ??
  234. ???? ??
  235. ????nextLink(); ??
  236. ????lastLink(); ??
  237. } ??
  238. ??
  239. hide(); ??
  240. </script>??
前端相關 html javascript idea xhtml
上一篇: jquery表格插件開發
下一篇: vue動态控制表格顯示

繼續閱讀