程序博客网 > 生态科技城大数据企业

兼容多浏览器Javascript实现分页功能

来源：互联网 发布：生态科技城大数据企业 编辑：程序博客网 时间：2024/06/02 23:36

首先，创建一个page.js文件，实现客户端分页的功能，代码如下：

[javascript] view plaincopyprint?
  1. /* 
  2. * 客户端分页类 
  3. * @pageSize 每页显示记录数 
  4. * @tableID  分页表格ID 
  5. * @tbodyID  分页表格TBODY的ID 
  6. */  
  7.   
  8. /* 
  9. 构造 
  10. */  
  11. function PagingClass(pageSize,tableID,tbodyID) {  
  12.     this._pageSize = pageSize; //每页最大记录数  
  13.     this._tableId = tableID;  
  14.     this._tBodyId = tbodyID;  
  15.     this._rowCount = 0;//记录数  
  16.     this.pageCount = 0;//页数  
  17.     this.pageIndex = 0;//页索引  
  18.     this._curTable = null;//表格引用  
  19.     this._curTBody = null;//要分页内容  
  20.     this._curRows = 0;//记录行引用  
  21.     this._oldTBody = null;  
  22.     this._initPaging(); //初始化;  
  23. };  
  24.   
  25. /* 
  26. 初始化 
  27. */  
  28.   
  29. PagingClass.prototype._initPaging = function(){  
  30.     this._curTable = document.getElementById(this._tableId);  
  31.     this._curTBody = this._curTable.tBodies[this._tBodyId];  
  32.     this._curRows = this._curTBody.rows;  
  33.     this._rowCount = this._curRows.length;  
  34.     try{  
  35.         this._pageSize = (this._pageSize <= 0) || (this._pageSize>this._rowCount) ? this._rowCount : this._pageSize;   
  36.         this.pageCount = parseInt(this._rowCount%this._pageSize == 0 ? this._rowCount/this._pageSize : this._rowCount/this._pageSize+1);  
  37.     } catch(exception){}  
  38.   
  39.     this._updateTableRows_();  
  40. };  
  41.   
  42. /* 
  43. 下一页 
  44. */  
  45. PagingClass.prototype.nextPage = function(){  
  46.     if(this.pageIndex + 1 < this.pageCount){  
  47.         this.pageIndex += 1;  
  48.         this._updateTableRows_();  
  49.     }  
  50. };  
  51.   
  52. /* 
  53. 上一页 
  54. */  
  55. PagingClass.prototype.prePage = function(){  
  56.     if(this.pageIndex >= 1){  
  57.         this.pageIndex -= 1;  
  58.         this._updateTableRows_();  
  59.     }  
  60. };  
  61.   
  62. /* 
  63. 首页 
  64. */  
  65. PagingClass.prototype.firstPage = function(){  
  66.     if(this.pageIndex != 0){  
  67.         this.pageIndex = 0;  
  68.         this._updateTableRows_();  
  69.     }   
  70. };  
  71.   
  72. /* 
  73. 尾页 
  74. */  
  75. PagingClass.prototype.lastPage = function(){  
  76.     if(this.pageIndex+1 != this.pageCount){  
  77.         this.pageIndex = this.pageCount - 1;  
  78.         this._updateTableRows_();  
  79.     }  
  80. };  
  81.   
  82. /* 
  83. 页定位方法 
  84. */  
  85. PagingClass.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. /* 
  97. 执行分页时，更新显示表格内容 
  98. */  
  99.   
  100. PagingClass.prototype._updateTableRows_ = function(){  
  101.     var iCurrentRowCount = this._pageSize * this.pageIndex;  
  102.     var iMoreRow = this._pageSize+iCurrentRowCount > this._rowCount ? this._pageSize+iCurrentRowCount - this._rowCount : 0;  
  103.     var tempRows = this._cloneRows_();  
  104.     var removedTBody = this._curTable.removeChild(this._curTBody);  
  105.     var newTBody = document.createElement("TBODY");  
  106.     newTBody.setAttribute("id", this._tBodyId);  
  107.   
  108.     for(var i=iCurrentRowCount; i < this._pageSize+iCurrentRowCount-iMoreRow; i++){  
  109.         newTBody.appendChild(tempRows[i]);  
  110.     }  
  111.       
  112.     this._curTable.appendChild(newTBody);  
  113.   
  114.     this._curRows = tempRows;  
  115.     this._curTBody = newTBody;  
  116. };  
  117.   
  118. /* 
  119. 克隆原始操作行集合 
  120. */  
  121. PagingClass.prototype._cloneRows_ = function(){  
  122.     var tempRows = [];  
  123.     for(var i=0; i<this._curRows.length; i++){  
  124.         tempRows[i] = this._curRows[i].cloneNode(1);  
  125.     }  
  126.     return tempRows;  
  127. };  

然后，创建一个html页面，比如：

[html] view plaincopyprint?
  1. <table class="base_table" id="tbSeatList">  
  2.     <thead>  
  3.   
  4.         <tr>  
  5.             <th>  
  6.                 航空公司  
  7.             </th>  
  8.             <th>  
  9.                 航线  
  10.             </th>  
  11.             <th>  
  12.                 价格  
  13.             </th>  
  14.   
  15.             <th>  
  16.                 航班日期  
  17.             </th>  
  18.             <th>  
  19.                 放位时间  
  20.             </th>  
  21.             <th>  
  22.                 航班号  
  23.             </th>  
  24.             <th>  
  25.   
  26.                 放位数量  
  27.             </th>  
  28.             <th>  
  29.                 记录编号  
  30.             </th>  
  31.             <th>  
  32.                 操作  
  33.             </th>  
  34.         </tr>  
  35.     </thead>  
  36.   
  37.     <tbody id="bodyPaging">  
  38.           
  39.         <tr>  
  40.             <td>  
  41.                 中国东方航空公司  
  42.             </td>  
  43.             <td>  
  44.                 北京  
  45.                 →  
  46.                 上海  
  47.             </td>  
  48.             <td>  
  49.                 <span class="base_price"><dfn>¥</dfn>339</span>  
  50.   
  51.             </td>  
  52.             <td>  
  53.                 2012-07-12  
  54.             </td>  
  55.             <td>  
  56.                 2012-06-26 13:28  
  57.             </td>  
  58.             <td>  
  59.                 MU8888   
  60.             </td>  
  61.   
  62.             <td>  
  63.                 2  
  64.             </td>  
  65.             <td>  
  66.                 GBDDEE  
  67.             </td>  
  68.             <td>  
  69.                 <a target="_blank" href="">  
  70.                     查看</a>  
  71.   
  72.             </td>  
  73.         </tr>  
  74.           
  75.         <tr>  
  76.             <td>  
  77.                 中国东方航空公司  
  78.             </td>  
  79.             <td>  
  80.                 上海  
  81.                 →  
  82.                 成都  
  83.             </td>  
  84.             <td>  
  85.   
  86.                 <span class="base_price"><dfn>¥</dfn>400</span>  
  87.             </td>  
  88.             <td>  
  89.                 2012-07-09  
  90.             </td>  
  91.             <td>  
  92.                 2012-06-26 13:25  
  93.             </td>  
  94.             <td>  
  95.   
  96.                 MU3333   
  97.             </td>  
  98.             <td>  
  99.                 3  
  100.             </td>  
  101.             <td>  
  102.                 EFGDE  
  103.             </td>  
  104.             <td>  
  105.                 <a target="_blank" href="">  
  106.   
  107.                     查看</a>  
  108.             </td>  
  109.         </tr>  
  110.           
  111.         <tr>  
  112.             <td>  
  113.                 中国东方航空公司  
  114.             </td>  
  115.             <td>  
  116.                 上海  
  117.                 →  
  118.                 成都  
  119.             </td>  
  120.   
  121.             <td>  
  122.                 <span class="base_price"><dfn>¥</dfn>400</span>  
  123.             </td>  
  124.             <td>  
  125.                 2012-07-12  
  126.             </td>  
  127.             <td>  
  128.                 2012-06-26 13:23  
  129.             </td>  
  130.   
  131.             <td>  
  132.                 MU2345   
  133.             </td>  
  134.             <td>  
  135.                 2  
  136.             </td>  
  137.             <td>  
  138.                 PNR012  
  139.             </td>  
  140.             <td>  
  141.   
  142.                 <a target="_blank" href="">  
  143.                     查看</a>  
  144.             </td>  
  145.         </tr>  
  146.           
  147.         <tr>  
  148.             <td>  
  149.                 中国东方航空公司  
  150.             </td>  
  151.             <td>  
  152.   
  153.                 乌鲁木齐  
  154.                 →  
  155.                 哈尔滨  
  156.             </td>  
  157.             <td>  
  158.                 <span class="base_price"><dfn>¥</dfn>360</span>  
  159.             </td>  
  160.             <td>  
  161.                 2012-07-25  
  162.             </td>  
  163.             <td>  
  164.   
  165.                 2012-06-26 11:28  
  166.             </td>  
  167.             <td>  
  168.                 mu0725   
  169.             </td>  
  170.             <td>  
  171.                 3  
  172.             </td>  
  173.             <td>  
  174.                 123  
  175.             </td>  
  176.   
  177.             <td>  
  178.                 <a target="_blank" href="">  
  179.                     查看</a>  
  180.             </td>  
  181.         </tr>  
  182.           
  183.         <tr>  
  184.             <td>  
  185.                 中国东方航空公司  
  186.             </td>  
  187.   
  188.             <td>  
  189.                 乌鲁木齐  
  190.                 →  
  191.                 哈尔滨  
  192.             </td>  
  193.             <td>  
  194.                 <span class="base_price"><dfn>¥</dfn>360</span>  
  195.             </td>  
  196.             <td>  
  197.                 2012-07-03  
  198.             </td>  
  199.   
  200.             <td>  
  201.                 2012-06-26 11:06  
  202.             </td>  
  203.             <td>  
  204.                 mu0703   
  205.             </td>  
  206.             <td>  
  207.                 2  
  208.             </td>  
  209.             <td>  
  210.   
  211.                 12  
  212.             </td>  
  213.             <td>  
  214.                 <a target="_blank" href="">  
  215.                     查看</a>  
  216.             </td>  
  217.         </tr>  
  218.           
  219.     </tbody>  
  220. </table>  
  221.   
  222. <br />  
  223. <div style="float:right;">  
  224.     <table border="0" cellpadding="0" cellspacing="0">  
  225.         <tr>  
  226.             <td>  
  227.                 <a href="javascript:void(0)" onclick="prePage();" style="color: Black;">上一页</a>  
  228.             </td>  
  229.             <td>  
  230.   
  231.                   <span id="pageindex" style="font-weight: bold;"></span>    
  232.             </td>  
  233.             <td>  
  234.                 <a href="javascript:void(0)" onclick="nextPage();" style="color: Black;">下一页</a>  
  235.             </td>  
  236.         </tr>  
  237.     </table>  
  238. </div>  

最后，页面的head部分添加以下js，调用分页功能：

[javascript] view plaincopyprint?
  1. <script type="text/javascript" src="../JS/page.js"></script>  
  2. <script type="text/javascript" language="javascript">  
  3.     var page;  
  4.   
  5.     window.onload = function () {  
  6.         if (document.getElementById('tbSeatList')) {  
  7.             page = new PagingClass(15, 'tbSeatList', 'bodyPaging');  
  8.             document.getElementById('pageindex').innerHTML = page.pageIndex + 1 + ' / ' + page.pageCount;  
  9.         }  
  10.     };  
  11.   
  12.     function nextPage() {  
  13.         page.nextPage();  
  14.         document.getElementById('pageindex').innerHTML = page.pageIndex + 1 + ' / ' + page.pageCount;  
  15.     }  
  16.   
  17.     function prePage() {  
  18.         page.prePage();  
  19.         document.getElementById('pageindex').innerHTML = page.pageIndex + 1 + ' / ' + page.pageCount;  
  20.     }  
  21. </script> 

0 0
生态科技城大数据企业 生态科技城大数据企业
原创粉丝点击
热门IT博客
腐蚀数据手册下载腐蚀数据手册下载
沪江开心词场网络异常沪江开心词场网络异常
nginx配置文件server
印度超越 知乎
淘宝客 知乎
有英语网络聊天的吗
工时表软件
横河otdr软件下载
linux net snmp 下载
手机怎样注册开淘宝店
花千骨天羽进阶数据
数据结构与算法百度云
ubuntu 系统监视器
网络四十禁书
wps数据透视表怎么排序
2017淘宝设备管理在哪
手机淘宝发货流程
淘宝拍照灯光怎么打
程序员薪资调查
淘宝植美村旗舰店真假
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 石墩子 墩子肉 墩煌种业股吧 墩煌莫高窟是哪个城市 墩煌市 壁刀煞图解 壁刀煞 壁刀 胆囊壁厚 厚壁管 子宫内壁厚 焊接钢管壁厚一览表 厚壁 dn100镀锌管壁厚 45#厚壁无缝管厂家 50钢管壁厚 厚壁镀锌方管 厚壁紫铜管 正常子宫壁多厚 子宫壁厚多少 子宫壁厚6 pe双壁波纹管壁厚 pe管壁厚 卵泡壁厚 中厚壁钢管 q345b厚壁无缝管 子宫壁厚怎么回事 厚壁热镀锌方矩管 东壁 壁什么意思 壁冬是什么意思 壁咚 壁咚图片 壁咚啥意思 壁咚什么意思呀 壁咚你啊啥意思 花式壁咚999次九爷坏 一字马壁咚 壁咚表情包 壁咚表情图片 男生壁咚女生表示什么

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里