JS实现多行的HTML静态表格分页代码 -JAVASCRIPT-编程相关-IT知道网(http://www.itwis.com)

JS实现多行的HTML静态表格分页代码

来源：发布时间：2007-11-22 发布人：浏览：人次字体： [大中小]

Paging.js

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

【↑返回顶部】【文章评论(1条)】【收藏本文】【打印本文】【关闭窗口↓】

↑上一篇：js操作innerHTML 引起的未知运行时错误

↓下一篇：Javascript里怎么取Array的某个值及Array对象的方法简介

发布商链接

·Javascript里怎么取Array的某个值及A...
·javascript解析身份证号码得到出生日...
·javascript清除界面上所有输入框的值
·javascript显示页面全部链接的特效代...
·页面显示加载信息的JS代码
·实现静态页面点击数的自动更新(使用A...
·javascript有关检测浏览器的版本的代...
·javascript实现多张图片轮流展示效果...
·鼠标右下角显示层，javascript读取xm...
·Ext2.0框架的Grid使用介绍祥解

§最新评论:（评论内容只代表网友观点，与本站立场无关！）

网名：验证码：

【所有评论】【↑返回顶部】

评　分： 12 345

评论内容：(不能超过500字，请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]

注意:请勿在本站发布政治话题、色情及违反法律的内容。

IT知道网声明：刊登此文章是为了传递更多信息，文章内容仅供参考，转载请注明出处。


首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视

编程学堂> JAVA专区 \| .NET专区 \| PHP 专区 \| ASP 专区 \| C/C++ \| JAVASCRIPT \| 数据库 \| 软件工程 \| 网络技术 \| 网站制作 \| 编程相关 \| 硬件资讯
业界相关> 业界新闻 \| 操作系统 \| 办公技巧 \| 病毒安全 \| 图形图像 \| 常用工具 \| 资源下载 \| 网站推广 \| 即时通讯 \| IT故事 \| IT健康 \| QQ---MSN