js表格分页实现代码

分享时间:2018-10-19 10952 热度℃
  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. {
  15. this.absolute = iAbsolute; //每页最大记录数
  16. this.tableId = sTableId;
  17. this.tBodyId = sTBodyId;
  18. this.rowCount = 0;//记录数
  19. this.pageCount = 0;//页数
  20. this.pageIndex = 0;//页索引
  21. this.__oTable__ = null;//表格引用
  22. this.__oTBody__ = null;//要分页内容
  23. this.__dataRows__ = 0;//记录行引用
  24. this.__oldTBody__ = null;
  25. this.__init__(); //初始化;
  26. };
  27. /**//*
  28. 初始化
  29. */
  30. Page.prototype.__init__ = function(){
  31. this.__oTable__ = document.getElementById(this.tableId);//获取table引用
  32. this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];//获取tBody引用
  33. this.__dataRows__ = this.__oTBody__.rows;
  34. this.rowCount = this.__dataRows__.length;
  35. try{
  36. this.absolute = (this.absolute <= 0) || (this.absolute>this.rowCount) ? this.rowCount : this.absolute;
  37. this.pageCount = parseInt(this.rowCount%this.absolute == 0
  38. ? this.rowCount/this.absolute : this.rowCount/this.absolute+1);
  39. }catch(exception){}
  40. this.__updateTableRows__();
  41. };
  42. Page.prototype.GetBar=function(obj)
  43. {
  44. var bar= document.getElementById(obj.id);
  45. bar.innerHTML= "每页"+this.absolute+"条/共"+this.rowCount+"条";// 第2页/共6页 首页 上一页 1 2 3 4 5 6 下一页 末页
  46. }
  47. /**//*
  48. 下一页
  49. */
  50. Page.prototype.nextPage = function(){
  51. if(this.pageIndex + 1 < this.pageCount){
  52. this.pageIndex += 1;
  53. this.__updateTableRows__();
  54. }
  55. };
  56. /**//*
  57. 上一页
  58. */
  59. Page.prototype.prePage = function(){
  60. if(this.pageIndex >= 1){
  61. this.pageIndex -= 1;
  62. this.__updateTableRows__();
  63. }
  64. };
  65. /**//*
  66. 首页
  67. */
  68. Page.prototype.firstPage = function(){
  69. if(this.pageIndex != 0){
  70. this.pageIndex = 0;
  71. this.__updateTableRows__();
  72. }
  73. };
  74. /**//*
  75. 尾页
  76. */
  77. Page.prototype.lastPage = function(){
  78. if(this.pageIndex+1 != this.pageCount){
  79. this.pageIndex = this.pageCount - 1;
  80. this.__updateTableRows__();
  81. }
  82. };
  83. /**//*
  84. 页定位方法
  85. */
  86. Page.prototype.aimPage = function(){
  87. var abc = document.getElementById("pageno");
  88. var iPageIndex = abc.value;
  89. var iPageIndex = iPageIndex*1;
  90. if(iPageIndex > this.pageCount-1){
  91. this.pageIndex = this.pageCount -1;
  92. }else if(iPageIndex < 0){
  93. this.pageIndex = 0;
  94. }else{
  95. this.pageIndex = iPageIndex-1;
  96. }
  97. this.__updateTableRows__();
  98. };
  99. /**//*
  100. 执行分页时,更新显示表格内容
  101. */
  102. Page.prototype.__updateTableRows__ = function(){
  103. var iCurrentRowCount = this.absolute * this.pageIndex;
  104. var iMoreRow = this.absolute+iCurrentRowCount > this.rowCount ? this.absolute+iCurrentRowCount - this.rowCount : 0;
  105. var tempRows = this.__cloneRows__();
  106. var removedTBody = this.__oTable__.removeChild(this.__oTBody__);
  107. var newTBody = document.createElement("TBODY");
  108. newTBody.setAttribute("id", this.tBodyId);
  109. for(var i=iCurrentRowCount; i < this.absolute+iCurrentRowCount-iMoreRow; i++){
  110. newTBody.appendChild(tempRows[i]);
  111. }
  112. this.__oTable__.appendChild(newTBody);
  113. this.__dataRows__ = tempRows;
  114. this.__oTBody__ = newTBody;
  115. //页脚显示分
  116. var divFood = document.getElementById("divFood");//分页工具栏
  117. divFood.innerHTML="";
  118. var rightBar = document.createElement("divFood");
  119. rightBar.setAttribute("display","");
  120. rightBar.setAttribute("float","left");
  121. rightBar.innerHTML="第"+(this.pageIndex+1)+"页/共"+this.pageCount+"页";
  122. var isOK="Y";
  123. var cssColor="";
  124. divFood.appendChild(rightBar);
  125. ////页脚显示分页结
  126. };
  127. /**//*
  128. 克隆原始操作行集合
  129. */
  130. Page.prototype.__cloneRows__ = function(){
  131. var tempRows = [];
  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. <script type="text/javascript" language="javascript">
  139. window.onload = function(){
  140. page = new Page(3,'senfe','group_one'); };
  141. </script>
  142. <style type="text/css"><!--
  143. #senfe {
  144. border-top: #000 1px solid;
  145. border-left: #000 1px solid;
  146. }
  147. #senfe td {
  148. border-right: #000 1px solid;
  149. border-bottom: #000 1px solid;
  150. }
  151. --></style>
  152. <script language="javascript"><!--
  153. function senfe(o,a,b,c,d){
  154. var t=document.getElementById(o).getElementsByTagName("tr");
  155. for(var i=0;i<t.length;i++){
  156. t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
  157. }
  158. }
  159. --></script>
  160. </head>
  161. <body>
  162. <div>
  163. <table border="0" cellpadding="0" cellspacing="0" bordercolor="#006600" id="senfe">
  164. <thead>
  165. <tr align="center" valign="middle">
  166. <td width="46" height="23" bgcolor="#FFFFFF">编号</td>
  167. <td width="71" bgcolor="#FFFFFF"><select name="select" dir="ltr">
  168. <option>套类别</option>
  169. <option>A套</option>
  170. <option>B套</option>
  171. </select></td>
  172. <td width="53" bgcolor="#FFFFFF">名称</td>
  173. <td width="53" bgcolor="#FFFFFF">数量</td>
  174. <td width="53" bgcolor="#FFFFFF">单价</td>
  175. <td width="95" bgcolor="#FFFFFF"><select name="select" dir="ltr">
  176. <option>单位</option>
  177. <option>个</option>
  178. <option>双</option>
  179. </select></td>
  180. <td width="80" bgcolor="#FFFFFF">酒店名称</td>
  181. <td width="35" bgcolor="#FFFFFF">备注</td>
  182. </tr>
  183. </thead>
  184. <tbody id="group_one">
  185. <tr>
  186. <td>1</td>
  187. <td> </td>
  188. <td> </td>
  189. <td> </td>
  190. <td> </td>
  191. <td> </td>
  192. <td> </td>
  193. <td> </td>
  194. </tr>
  195. <tr>
  196. <td>2</td>
  197. <td> </td>
  198. <td> </td>
  199. <td> </td>
  200. <td> </td>
  201. <td> </td>
  202. <td> </td>
  203. <td> </td>
  204. </tr>
  205. <tr>
  206. <td>3</td>
  207. <td> </td>
  208. <td> </td>
  209. <td> </td>
  210. <td> </td>
  211. <td> </td>
  212. <td> </td>
  213. <td> </td>
  214. </tr>
  215. <tr>
  216. <td>4</td>
  217. <td> </td>
  218. <td> </td>
  219. <td> </td>
  220. <td> </td>
  221. <td> </td>
  222. <td> </td>
  223. <td> </td>
  224. </tr>
  225. <tr>
  226. <td>5</td>
  227. <td> </td>
  228. <td> </td>
  229. <td> </td>
  230. <td> </td>
  231. <td> </td>
  232. <td> </td>
  233. <td> </td>
  234. </tr>
  235. <tr>
  236. <td>6</td>
  237. <td> </td>
  238. <td> </td>
  239. <td> </td>
  240. <td> </td>
  241. <td> </td>
  242. <td> </td>
  243. <td> </td>
  244. </tr>
  245. <tr>
  246. <td>7</td>
  247. <td> </td>
  248. <td> </td>
  249. <td> </td>
  250. <td> </td>
  251. <td> </td>
  252. <td> </td>
  253. <td> </td>
  254. </tr>
  255. <tr>
  256. <td>8</td>
  257. <td> </td>
  258. <td> </td>
  259. <td> </td>
  260. <td> </td>
  261. <td> </td>
  262. <td> </td>
  263. <td> </td>
  264. </tr>
  265. <tr>
  266. <td>9</td>
  267. <td> </td>
  268. <td> </td>
  269. <td> </td>
  270. <td> </td>
  271. <td> </td>
  272. <td> </td>
  273. <td> </td>
  274. </tr>
  275. </tbody>
  276. </table>
  277. <script language="javascript"><!--
  278. //senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
  279. senfe("senfe","#fff","#ccc","#cfc","#f00");
  280. --></script>
  281. </div>
  282. <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">
  283. </span>
  284. /第
  285. <input id="pageno" value="1" style="width:20px"/>页/<a href="#" onclick="page.aimPage();">跳转</a></div>
  286. </div>
  287. </div>
  288. </body>
  289. </html>
复制代码
本文标签:
返回顶部