201906031559491686653557.jpg

首页 教程资源正文

怎样在js表格分页中实现代码的方法

娜迦源码 教程资源 2019-03-24 00:54:20 239 0 教程资源

201906031559491686653557.jpg

  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. <meta http-equiv="Content-Language" content="zh-CN" /> 

  6. <meta content="all" name="robots" /> 

  7. <meta name="Copyright" content="" /> 

  8. <meta name="description" content="" /> 

  9. <meta content="" name="keywords" /> 

  10. <link rel="stylesheet" type="text/css" href="css.css" /> 

  11. <title>原料库管理</title> 

  12. <script> 

  13. function Page(iAbsolute,sTableId,sTBodyId,page) 


  14. this.absolute = iAbsolute; //每页最大记录数 

  15. this.tableId = sTableId; 

  16. this.tBodyId = sTBodyId; 

  17. this.rowCount = 0;//记录数 

  18. this.pageCount = 0;//页数 

  19. this.pageIndex = 0;//页索引 

  20. this.__oTable__ = null;//表格引用 

  21. this.__oTBody__ = null;//要分页内容 

  22. this.__dataRows__ = 0;//记录行引用 

  23. this.__oldTBody__ = null; 

  24. this.__init__(); //初始化; 

  25. }; 

  26. /**//* 

  27. 初始化 

  28. */ 

  29. Page.prototype.__init__ = function(){ 

  30. this.__oTable__ = document.getElementById(this.tableId);//获取table引用 

  31. this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];//获取tBody引用 

  32. this.__dataRows__ = this.__oTBody__.rows; 

  33. this.rowCount = this.__dataRows__.length; 

  34. try{ 

  35. this.absolute = (this.absolute <= 0) || (this.absolute>this.rowCount) ? this.rowCount : this.absolute; 

  36. this.pageCount = parseInt(this.rowCount%this.absolute == 0 

  37. ? this.rowCount/this.absolute : this.rowCount/this.absolute+1); 

  38. }catch(exception){} 

  39. this.__updateTableRows__(); 

  40. }; 

  41. Page.prototype.GetBar=function(obj) 


  42. var bar= document.getElementById(obj.id); 

  43. bar.innerHTML= "每页"+this.absolute+"条/共"+this.rowCount+"条";// 第2页/共6页 首页 上一页 1 2 3 4 5 6 下一页 末页 


  44. /**//* 

  45. 下一页 

  46. */ 

  47. Page.prototype.nextPage = function(){ 

  48. if(this.pageIndex + 1 < this.pageCount){ 

  49. this.pageIndex += 1; 

  50. this.__updateTableRows__(); 


  51. }; 

  52. /**//* 

  53. 上一页 

  54. */ 

  55. Page.prototype.prePage = function(){ 

  56. if(this.pageIndex >= 1){ 

  57. this.pageIndex -= 1; 

  58. this.__updateTableRows__(); 


  59. }; 

  60. /**//* 

  61. 首页 

  62. */ 

  63. Page.prototype.firstPage = function(){ 

  64. if(this.pageIndex != 0){ 

  65. this.pageIndex = 0; 

  66. this.__updateTableRows__(); 


  67. }; 

  68. /**//* 

  69. 尾页 

  70. */ 

  71. Page.prototype.lastPage = function(){ 

  72. if(this.pageIndex+1 != this.pageCount){ 

  73. this.pageIndex = this.pageCount - 1; 

  74. this.__updateTableRows__(); 


  75. }; 

  76. /**//* 

  77. 页定位方法 

  78. */ 

  79. Page.prototype.aimPage = function(){ 

  80. var abc = document.getElementById("pageno"); 

  81. var iPageIndex = abc.value; 

  82. var iPageIndex = iPageIndex*1; 

  83. if(iPageIndex > this.pageCount-1){ 

  84. this.pageIndex = this.pageCount -1; 

  85. }else if(iPageIndex < 0){ 

  86. this.pageIndex = 0; 

  87. }else{ 

  88. this.pageIndex = iPageIndex-1; 


  89. this.__updateTableRows__(); 

  90. }; 

  91. /**//* 

  92. 执行分页时,更新显示表格内容 

  93. */ 

  94. Page.prototype.__updateTableRows__ = function(){ 

  95. var iCurrentRowCount = this.absolute * this.pageIndex; 

  96. var iMoreRow = this.absolute+iCurrentRowCount > this.rowCount ? this.absolute+iCurrentRowCount - this.rowCount : 0; 

  97. var tempRows = this.__cloneRows__(); 

  98. var removedTBody = this.__oTable__.removeChild(this.__oTBody__); 

  99. var newTBody = document.createElement("TBODY"); 

  100. newTBody.setAttribute("id", this.tBodyId); 

  101. for(var i=iCurrentRowCount; i < this.absolute+iCurrentRowCount-iMoreRow; i++){ 

  102. newTBody.appendChild(tempRows[i]); 


  103. this.__oTable__.appendChild(newTBody); 

  104. this.__dataRows__ = tempRows; 

  105. this.__oTBody__ = newTBody; 

  106. //页脚显示分 

  107. var divFood = document.getElementById("divFood");//分页工具栏 

  108. divFood.innerHTML=""; 

  109. var rightBar = document.createElement("divFood"); 

  110. rightBar.setAttribute("display",""); 

  111. rightBar.setAttribute("float","left"); 

  112. rightBar.innerHTML="第"+(this.pageIndex+1)+"页/共"+this.pageCount+"页"; 

  113. var isOK="Y"; 

  114. var cssColor=""; 

  115. divFood.appendChild(rightBar); 

  116. ////页脚显示分页结 

  117. }; 

  118. /**//* 

  119. 克隆原始操作行集合 

  120. */ 

  121. Page.prototype.__cloneRows__ = function(){ 

  122. var tempRows = []; 

  123. for(var i=0; i<this.__dataRows__.length; i++){ 

  124. tempRows[i] = this.__dataRows__[i].cloneNode(1); 


  125. return tempRows; 

  126. }; 

  127. </script> 

  128. <script type="text/javascript" language="javascript"> 

  129. window.onload = function(){ 

  130. page = new Page(3,'senfe','group_one'); }; 

  131. </script> 

  132. <style type="text/css"><!-- 

  133. #senfe { 

  134. border-top: #000 1px solid; 

  135. border-left: #000 1px solid; 


  136. #senfe td { 

  137. border-right: #000 1px solid; 

  138. border-bottom: #000 1px solid; 


  139. --></style> 

  140. <script language="javascript"><!-- 

  141. function senfe(o,a,b,c,d){ 

  142. var t=document.getElementById(o).getElementsByTagName("tr"); 

  143. for(var i=0;i<t.length;i++){ 

  144. t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b; 



  145. --></script> 

  146. </head> 

  147. <body> 

  148. <div> 

  149. <table border="0" cellpadding="0" cellspacing="0" bordercolor="#006600" id="senfe"> 

  150. <thead> 

  151. <tr align="center" valign="middle"> 

  152. <td width="46" height="23" bgcolor="#FFFFFF">编号</td> 

  153. <td width="71" bgcolor="#FFFFFF"><select name="select" dir="ltr"> 

  154. <option>套类别</option> 

  155. <option>A套</option> 

  156. <option>B套</option> 

  157. </select></td> 

  158. <td width="53" bgcolor="#FFFFFF">名称</td> 

  159. <td width="53" bgcolor="#FFFFFF">数量</td> 

  160. <td width="53" bgcolor="#FFFFFF">单价</td> 

  161. <td width="95" bgcolor="#FFFFFF"><select name="select" dir="ltr"> 

  162. <option>单位</option> 

  163. <option>个</option> 

  164. <option>双</option> 

  165. </select></td> 

  166. <td width="80" bgcolor="#FFFFFF">酒店名称</td> 

  167. <td width="35" bgcolor="#FFFFFF">备注</td> 

  168. </tr> 

  169. </thead> 

  170. <tbody id="group_one"> 

  171. <tr> 

  172. <td>1</td> 

  173. <td> </td> 

  174. <td> </td> 

  175. <td> </td> 

  176. <td> </td> 

  177. <td> </td> 

  178. <td> </td> 

  179. <td> </td> 

  180. </tr> 

  181. <tr> 

  182. <td>2</td> 

  183. <td> </td> 

  184. <td> </td> 

  185. <td> </td> 

  186. <td> </td> 

  187. <td> </td> 

  188. <td> </td> 

  189. <td> </td> 

  190. </tr> 

  191. <tr> 

  192. <td>3</td> 

  193. <td> </td> 

  194. <td> </td> 

  195. <td> </td> 

  196. <td> </td> 

  197. <td> </td> 

  198. <td> </td> 

  199. <td> </td> 

  200. </tr> 

  201. <tr> 

  202. <td>4</td> 

  203. <td> </td> 

  204. <td> </td> 

  205. <td> </td> 

  206. <td> </td> 

  207. <td> </td> 

  208. <td> </td> 

  209. <td> </td> 

  210. </tr> 

  211. <tr> 

  212. <td>5</td> 

  213. <td> </td> 

  214. <td> </td> 

  215. <td> </td> 

  216. <td> </td> 

  217. <td> </td> 

  218. <td> </td> 

  219. <td> </td> 

  220. </tr> 

  221. <tr> 

  222. <td>6</td> 

  223. <td> </td> 

  224. <td> </td> 

  225. <td> </td> 

  226. <td> </td> 

  227. <td> </td> 

  228. <td> </td> 

  229. <td> </td> 

  230. </tr> 

  231. <tr> 

  232. <td>7</td> 

  233. <td> </td> 

  234. <td> </td> 

  235. <td> </td> 

  236. <td> </td> 

  237. <td> </td> 

  238. <td> </td> 

  239. <td> </td> 

  240. </tr> 

  241. <tr> 

  242. <td>8</td> 

  243. <td> </td> 

  244. <td> </td> 

  245. <td> </td> 

  246. <td> </td> 

  247. <td> </td> 

  248. <td> </td> 

  249. <td> </td> 

  250. </tr> 

  251. <tr> 

  252. <td>9</td> 

  253. <td> </td> 

  254. <td> </td> 

  255. <td> </td> 

  256. <td> </td> 

  257. <td> </td> 

  258. <td> </td> 

  259. <td> </td> 

  260. </tr> 

  261. </tbody> 

  262. </table> 

  263. <script language="javascript"><!-- 

  264. //senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景"); 

  265. senfe("senfe","#fff","#ccc","#cfc","#f00"); 

  266. --></script> 

  267. </div> 

  268. <div><a href="#" onclick="page.firstPage();">首 页</a>/<a href="#" onclick="page.nextPage();">下一页</a>/<a href="#" onclick="page.prePage();">上一页</a>/<a href="#" onclick="page.lastPage();">末 页</a><span id="divFood"> 

  269. </span> 

  270. /第 

  271. <input id="pageno" value="1" style="width:20px"/>页/<a href="#" onclick="page.aimPage();">跳转</a></div> 

  272. </div> 

  273. </div> 

  274. </body> 

  275. </html>

复制代码


201906031559491686653557.jpg

版权声明

1:如非特殊说明,本站对提供的源码不拥有任何权利,其版权归原著者拥有。

2:请勿将该源码、软件进行商业交易、转载等行为,该源码、软件只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。

3:本网站所有源码和软件均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。如有侵犯你版权的,请来信(邮箱:393249296@qq.com)指出,本站将立即改正

本文链接:https://www.wsx6.cn/post/599.html

201906031559491686653557.jpg

分享:

支付宝

微信

请先 登录 再评论,若不是会员请先 注册