<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <style type="text/css"> .tablebox{border:solid 1px #ddd;} .tablebox td{text-align:center;border:solid 1px #ddd;padding:5px;} </style> <div style="530px;margin:0 auto;"> <table class="tablebox" width="500" border="0" cellpadding="0" cellspacing="0"> <tbody id="table2"> <tr> <td>1</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>2</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>3</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>4</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>5</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>6</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>7</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>8</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>9</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>10</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>11</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> <div style="height:30px;margin:20px 0 0 0;"> <span id="spanFirst">第一页</span> <span id="spanPre">上一页</span> <span id="spanNext">下一页</span> <span id="spanLast">最后一页</span> 第 <span id="spanPageNum"></span> 页/共 <span id="spanTotalPage"></span> 页 </div> </div> <script type="text/javascript"> var theTable = document.getElementById("table2"); 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 = 3; var page = 1; //下一页 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 preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; } function preText() { spanPre.innerHTML = "上一页"; } function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; } function nextText() { spanNext.innerHTML = "下一页"; } function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; } function firstText() { spanFirst.innerHTML = "第一页"; } function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; } 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> </body> </html>