html 代码
- <!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=gb2312" />
- <title>无标题文档</title>
- </head>
- <body>
- <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">
- <tr>
- <th colspan="5">lishewen</th>
- </tr>
- <tbody id="tablelsw">
- <tr>
- <td bgcolor="#FFFFFF">1</td>
- <td bgcolor="#FFFFFF">算神</td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- </tr>
- <tr>
- <td bgcolor="#FFFFFF">2</td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- </tr>
- <tr>
- <td bgcolor="#FFFFFF">3</td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- </tr>
- <tr>
- <td bgcolor="#FFFFFF">4</td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- </tr>
- <tr>
- <td bgcolor="#FFFFFF">5</td>
- <td bgcolor="#FFFFFF">黎摄文</td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- </tr>
- <tr>
- <td bgcolor="#FFFFFF">6</td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- </tr>
- <tr>
- <td bgcolor="#FFFFFF">7</td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- </tr>
- <tr>
- <td bgcolor="#FFFFFF">8</td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- </tr>
- <tr>
- <td bgcolor="#FFFFFF">9</td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- </tr>
- <tr>
- <td bgcolor="#FFFFFF">10</td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- </tr>
- <tr>
- <td bgcolor="#FFFFFF">11</td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- <td bgcolor="#FFFFFF"> </td>
- </tr>
- </tbody>
- </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>页
- <!--
- <script language="javascript" src="Paging.js"></script>
- -->
- </body>
- </html>
- <script>
- // JavaScript Document By lishewen
- var theTable = document.getElementById("tablelsw");
- 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 totalPaget = document.getElementById("spanTotalPaget");
- var pageNumt = document.getElementById("spanPageNumt");
- var spanPret = document.getElementById("spanPret");
- var spanNextt = document.getElementById("spanNextt");
- var spanFirstt = document.getElementById("spanFirstt");
- var spanLastt = document.getElementById("spanLastt");
- var numberRowsInTable = theTable.rows.length;
- var pageSize = 4;
- 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(){
- pagepageNum.innerHTML = page;
- pagepageNumt.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>"; spanPret.innerHTML = "<a href='javascript:pre();'>上一页</a>";}
- function preText(){ spanPre.innerHTML = "上一页"; spanPret.innerHTML = "上一页"; }
- function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; spanNextt.innerHTML = "<a href='javascript:next();'>下一页</a>";}
- function nextText(){ spanNext.innerHTML = "下一页"; spanNextt.innerHTML = "下一页";}
- function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; spanFirstt.innerHTML = "<a href='javascript:first();'>第一页</a>";}
- function firstText(){ spanFirst.innerHTML = "第一页"; spanFirstt.innerHTML = "第一页";}
- function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; spanLastt.innerHTML = "<a href='javascript:last();'>最后一页</a>";}
- function lastText(){ spanLast.innerHTML = "最后一页"; spanLastt.innerHTML = "最后一页";}
- //隐藏表格
- function hide(){
- for ( var i = pageSize; i<numberRowsInTable; i++ ){
- theTable.rows[i].style.display = 'none';
- }
- totalPage.innerHTML = pageCount();
- pageNum.innerHTML = '1';
- totalPaget.innerHTML = pageCount();
- pageNumt.innerHTML = '1';
- nextLink();
- lastLink();
- }
- hide();
- </script>