软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

HTML静态表格分页(通过JS实现)

html 代码 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  3. <title>无标题文档</title>  </head>  
  4.   <body>  
  5. <span id="spanFirstt">第一页</span> <span id="spanPret">上一页</span> <span id="spanNextt">下一页</span> <span id="spanLastt">最后一页</span> 第<span id="spanPageNumt"></span>页/共<span id="spanTotalPaget"></span>页   <table width="500" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">  
  6. <tr>      <th colspan="5">lishewen</th>  
  7. </tr>  <tbody id="tablelsw">  
  8.   <tr>      <td bgcolor="#FFFFFF">1</td>  
  9.     <td bgcolor="#FFFFFF">算神</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  10.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  11.   </tr>    <tr>  
  12.     <td bgcolor="#FFFFFF">2</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  13.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  14.     <td bgcolor="#FFFFFF">&nbsp;</td>    </tr>  
  15.   <tr>      <td bgcolor="#FFFFFF">3</td>  
  16.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  17.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  18.   </tr>    <tr>  
  19.     <td bgcolor="#FFFFFF">4</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  20.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  21.     <td bgcolor="#FFFFFF">&nbsp;</td>    </tr>  
  22.   <tr>      <td bgcolor="#FFFFFF">5</td>  
  23.     <td bgcolor="#FFFFFF">黎摄文</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  24.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  25.   </tr>    <tr>  
  26.     <td bgcolor="#FFFFFF">6</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  27.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  28.     <td bgcolor="#FFFFFF">&nbsp;</td>    </tr>  
  29.   <tr>      <td bgcolor="#FFFFFF">7</td>  
  30.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  31.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  32.   </tr>    <tr>  
  33.     <td bgcolor="#FFFFFF">8</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  34.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  35.     <td bgcolor="#FFFFFF">&nbsp;</td>    </tr>  
  36.   <tr>      <td bgcolor="#FFFFFF">9</td>  
  37.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  38.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  39.   </tr>    <tr>  
  40.     <td bgcolor="#FFFFFF">10</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  41.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  42.     <td bgcolor="#FFFFFF">&nbsp;</td>    </tr>  
  43.   <tr>      <td bgcolor="#FFFFFF">11</td>  
  44.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  45.     <td bgcolor="#FFFFFF">&nbsp;</td>      <td bgcolor="#FFFFFF">&nbsp;</td>  
  46.   </tr>    </tbody>  
  47. </table>  <span id="spanFirst">第一页</span> <span id="spanPre">上一页</span> <span id="spanNext">下一页</span> <span id="spanLast">最后一页</span> 第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页   
  48. <!--      <script language="javascript" src="Paging.js"></script>  
  49. -->  </body>  
  50. </html>  <script>  
  51. // JavaScript Document By lishewen   var theTable = document.getElementById("tablelsw");   
  52. var totalPage = document.getElementById("spanTotalPage");   var pageNum = document.getElementById("spanPageNum");   
  53.   var spanPre = document.getElementById("spanPre");   
  54. var spanNext = document.getElementById("spanNext");   var spanFirst = document.getElementById("spanFirst");   
  55. var spanLast = document.getElementById("spanLast");     
  56. var totalPaget = document.getElementById("spanTotalPaget");   var pageNumt = document.getElementById("spanPageNumt");   
  57.   var spanPret = document.getElementById("spanPret");   
  58. var spanNextt = document.getElementById("spanNextt");   var spanFirstt = document.getElementById("spanFirstt");   
  59. var spanLastt = document.getElementById("spanLastt");     
  60. var numberRowsInTable = theTable.rows.length;   var pageSize = 4;   
  61. var page = 1;     
  62. //下一页   function next(){   
  63.       hideTable();   
  64.            currentRow = pageSize * page;   
  65.     maxRow = currentRow + pageSize;       if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;   
  66.     for ( var i = currentRow; i< maxRow; i++ ){           theTable.rows[i].style.display = '';   
  67.     }       page++;   
  68.            if ( maxRow == numberRowsInTable ) { nextText(); lastText(); }   
  69.     showPage();       preLink();   
  70.     firstLink();   }   
  71.   //上一页   
  72. function pre(){     
  73.     hideTable();          
  74.     page--;          
  75.     currentRow = pageSize * page;       maxRow = currentRow - pageSize;   
  76.     if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable;       for ( var i = maxRow; i< currentRow; i++ ){   
  77.         theTable.rows[i].style.display = '';       }   
  78.               
  79.     if ( maxRow == 0 ){ preText(); firstText(); }       showPage();   
  80.     nextLink();       lastLink();   
  81. }     
  82. //第一页   function first(){   
  83.     hideTable();       page = 1;   
  84.     for ( var i = 0; i<pageSize; i++ ){           theTable.rows[i].style.display = '';   
  85.     }       showPage();   
  86.            preText();   
  87.     nextLink();       lastLink();   
  88. }     
  89. //最后一页   function last(){   
  90.     hideTable();       page = pageCount();   
  91.     currentRow = pageSize * (page - 1);       for ( var i = currentRow; i<numberRowsInTable; i++ ){   
  92.         theTable.rows[i].style.display = '';       }   
  93.     showPage();          
  94.     preLink();       nextText();   
  95.     firstLink();   }   
  96.   function hideTable(){   
  97.     for ( var i = 0; i<numberRowsInTable; i++ ){           theTable.rows[i].style.display = 'none';   
  98.     }   }   
  99.   function showPage(){   
  100.     pagepageNum.innerHTML = page;       pagepageNumt.innerHTML = page;   
  101. }     
  102. //总共页数   function pageCount(){   
  103.     var count = 0;       if ( numberRowsInTable%pageSize != 0 ) count = 1;    
  104.     return parseInt(numberRowsInTable/pageSize) + count;   }   
  105.   //显示链接   
  106. function preLink(){ spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; spanPret.innerHTML = "<a href='javascript:pre();'>上一页</a>";}   function preText(){ spanPre.innerHTML = "上一页"; spanPret.innerHTML = "上一页"; }   
  107.   function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; spanNextt.innerHTML = "<a href='javascript:next();'>下一页</a>";}   
  108. function nextText(){ spanNext.innerHTML = "下一页"; spanNextt.innerHTML = "下一页";}     
  109. function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; spanFirstt.innerHTML = "<a href='javascript:first();'>第一页</a>";}   function firstText(){ spanFirst.innerHTML = "第一页"; spanFirstt.innerHTML = "第一页";}   
  110.   function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; spanLastt.innerHTML = "<a href='javascript:last();'>最后一页</a>";}   
  111. function lastText(){ spanLast.innerHTML = "最后一页"; spanLastt.innerHTML = "最后一页";}     
  112. //隐藏表格   function hide(){   
  113.     for ( var i = pageSize; i<numberRowsInTable; i++ ){           theTable.rows[i].style.display = 'none';   
  114.     }          
  115.     totalPage.innerHTML = pageCount();       pageNum.innerHTML = '1';   
  116.            totalPaget.innerHTML = pageCount();   
  117.     pageNumt.innerHTML = '1';          
  118.     nextLink();       lastLink();   
  119. }     
  120. hide();   </script>