js实现分页问题

HTML页面（根据下面表格中的数据实现动态分页）

 <div style="float:left;background:#eee;;padding:0 5px 7px 0;"> <table><tr><td><span id="spanFirst"> 首页 </span> </td><td><span id="spanPre">上一页 </span> </td><td><span id="spanNext"> 下一页 </span></td>         <td><span id="spanLast"> 尾页 </span> </td><td> 第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页 </td></tr></table></div> <div class="form-group2">       <div class="list_content2">            <table id="gangqinqu_content_title" border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;">             <tr>                 <th style="width:60px;">序号</th>                 <th style="width:450px;">钢琴曲</th>                 <th style="width:120px;">演奏家</th>                 <th style="width:100px;">属性</th>                 <th style="width:100px;">发布时间</th>             </tr>             </table>            <table id="gangqinqu_content" border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;">            {loop $song_data $gangqinqu}             <tr>                 <td style="width:60px;text-align:center;" >                 <input type="checkbox" name="check_song" id="check_song" value="{$gangqinqu[id]}"/>                 </td>                 <td style="width:450px;" class="title">{$gangqinqu[title]}</td>                 <td style="width:120px;text-align:center;" class="zjname">{$gangqinqu[zjname]}</td>                 <td style="width:100px;text-align:center;" class="shuxing">{$gangqinqu[shuxing]}</td>                 <td style="width:100px;text-align:center;" class="inputtime">                     {date("Y-m-d",$gangqinqu[inputtime])}</td>             </tr>             {/loop}            </table>        </div>   </div>

js页面（控制分页）

<script> var theTable = document.getElementById("gangqinqu_content");   var totalPage = document.getElementById("spanTotalPage"); var pageNum = document.getElementById("spanPageNum");var spanPre = document.getElementById("spanPre");   var spanNext = document.getElementById("spanNext");   var spanFirst = document.getElementById("spanFirst");   var spanLast = document.getElementById("spanLast");   var numberRowsInTable = theTable.rows.length;  var pageSize = 15;   var page = 1;     //显示链接   function preLink(){ spanPre.innerHTML = "<a href='javascript:pre();' style='color:#6c9541;'>上一页</a>";}   function preText(){ spanPre.innerHTML = "上一页";}     function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();' style='color:#6c9541;'>下一页</a>";}   function nextText(){ spanNext.innerHTML = "下一页";}     function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();' style='color:#6c9541;'>首页</a>";}   function firstText(){ spanFirst.innerHTML = "首页";}     function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();' style='color:#6c9541;'>尾页</a>";}   function lastText(){ spanLast.innerHTML = "尾页";}     //下一页   function next(){     hideTable();   currentRow = pageSize * page;   maxRow = currentRow + pageSize;   if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;   for ( var i = currentRow; i< maxRow; i++ ){   theTable.rows[i].style.display = '';   }   page++;       if ( maxRow == numberRowsInTable ) { nextText(); lastText(); } showPage();   preLink();   firstLink();   }   //上一页   function pre(){   hideTable();       page--;        currentRow = pageSize * page;   maxRow = currentRow - pageSize;   if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable;   for ( var i = maxRow; i< currentRow; i++ ){   theTable.rows[i].style.display = '';   }     if ( maxRow == 0 ){ preText(); firstText(); }   showPage();   nextLink();   lastLink();   }   //第一页   function first(){   hideTable();   page = 1;   for ( var i = 0; i<pageSize; i++ ){   theTable.rows[i].style.display = '';   }   showPage();      preText();   nextLink();   lastLink();   }   //最后一页   function last(){   hideTable();   page = pageCount();   currentRow = pageSize * (page - 1);   for ( var i = currentRow; i<numberRowsInTable; i++ ){   theTable.rows[i].style.display = '';   }   showPage();      preLink();   nextText();   firstLink();   }  function hideTable(){   for ( var i = 0; i<numberRowsInTable; i++ ){   theTable.rows[i].style.display = 'none';   }   }     function showPage(){     pageNum.innerHTML = page;}   //总共页数   function pageCount(){   var count = 0;   if ( numberRowsInTable%pageSize != 0 ) count = 1;    return parseInt(numberRowsInTable/pageSize) + count;   }    function lastText(){ spanLast.innerHTML = "尾页";}     //隐藏表格   function hide(){   for ( var i = pageSize; i<numberRowsInTable; i++ ){   theTable.rows[i].style.display = 'none';   }      totalPage.innerHTML = pageCount();   pageNum.innerHTML = '1';      nextLink();   lastLink();   }    hide(); </script>

【效果预览】