HTML静态表格分页（通过JS实现）

rq2_79

浏览: 234980 次
性别:
来自: 上海

最近访客更多访客>>

helohdj

ling_iori

night_joe

seaSkys

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端相关

HTML JavaScript IDEA XHTML

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>