Html表格分页

最新推荐文章于 2023-09-30 13:23:47 发布
月色无痕
最新推荐文章于 2023-09-30 13:23:47 发布
阅读量1.2w
点赞数 6
分类专栏： Web 文章标签： html 分页表格
Web 专栏收录该内容
15 篇文章 0 订阅
订阅专栏
<!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(){   
    pageNum.innerHTML = page;   
    pageNumt.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>