静态html分页-白红宇

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>无标题文档</title>

</head>

<body>

<tr>

<th colspan="5">lishewen</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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>页

</body>

</html>

// 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 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;

}

//总共页数

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>

分类:

本文转自左正博客园博客，原文链接：http://www.cnblogs.com/soundcode/p/3412075.html

，如需转载请自行联系原作者