天天看點
傳回

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>????棰???妗?lt;/title>  
</head>  
  
<body>  
<span id="spanFirstt">绗?涓?椤?lt;/span> <span id="spanPret">涓?涓?椤?lt;/span> <span id="spanNextt">涓?涓?椤?lt;/span> <span id="spanLastt">????涓?椤?lt;/span> 绗?<span id="spanPageNumt"></span>椤???lt;span id="spanTotalPaget"></span>椤?  
<table width="500"  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">绗?涓?椤?lt;/span> 
<span id="spanPre">涓?涓?椤?lt;/span> 
<span id="spanNext">涓?涓?椤?lt;/span> 
<span id="spanLast">????涓?椤?lt;/span> 
绗?<span id="spanPageNum"></span>椤???lt;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();'>涓?涓?椤?lt;/a>"; spanPret.innerHTML = "<a href='javascript:pre();'>涓?涓?椤?lt;/a>";}   
function preText(){ spanPre.innerHTML = "涓?涓?椤?; spanPret.innerHTML = "涓?涓?椤?; }   
  
function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();'>涓?涓?椤?lt;/a>"; spanNextt.innerHTML = "<a href='javascript:next();'>涓?涓?椤?lt;/a>";}   
function nextText(){ spanNext.innerHTML = "涓?涓?椤?; spanNextt.innerHTML = "涓?涓?椤?;}   
  
function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();'>绗?涓?椤?lt;/a>"; spanFirstt.innerHTML = "<a href='javascript:first();'>绗?涓?椤?lt;/a>";}   
function firstText(){ spanFirst.innerHTML = "绗?涓?椤?; spanFirstt.innerHTML = "绗?涓?椤?;}   
  
function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();'>????涓?椤?lt;/a>"; spanLastt.innerHTML = "<a href='javascript:last();'>????涓?椤?lt;/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>
web html 分頁 表格
上一篇: Blazeds 整合 Spring
下一篇: Blazeds對session的支援

繼續閱讀