Javascript表格翻页效果的具体实现


Posted in Javascript onOctober 05, 2013

表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>表格翻页---3water.com</TITLE> 
<style> 
body, td{ 
font-size: 9pt; 
} 
a:link { 
color: #FF0000; 
} 
a:visited { 
color: #FF0000; 
} 
a:hover { 
color: #006600; 
} 
</style> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var record = 4;//每页显示多少条记录 
var count = 24;//记录总数 
var pageTotal = ((count+record-1)/record)|0;//总页数 
var pagenum = 1;//将要显示的页码 
Cookie = { 
Set : function (){ 
var name = arguments[0], value = escape(arguments[1]), days = 365, path = "/"; 
if(arguments.length > 2) days = arguments[2]; 
if(arguments.length > 3) path = arguments[3]; 
with(new Date()){ 
setDate(getDate()+days); 
days=toUTCString(); 
} 
document.cookie = "{0}={1};expires={2};path={3}".format(name, value, days, path); 
}, 
Get : function (){ 
var returnValue=document.cookie.match(new RegExp("[\b\^;]?" + arguments[0] + "=([^;]*)(?=;|\b|$)","i")); 
return returnValue?unescape(returnValue[1]):returnValue; 
} 
} 
String.prototype.format = function(){ 
var tmpStr = this; 
var iLen = arguments.length; 
for(var i=0;i<iLen;i++){ 
tmpStr = tmpStr.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]); 
} 
return tmpStr; 
} 
function setPagenum(){//整理Cookie 
pagenum = Cookie.Get("pagenum"); 
if(pagenum=="" || pagenum<1){ 
pagenum=1; 
} 
} 
setPagenum(); 
//重新整理当前页码,如果页面小于1,则赋值为1,如果大于总页数,则等于总页数 
coordinatePagenum(pagenum); 
//根据当前要显示的页码取得当前面里第一条记录的号码 
var pageBegin = (record*(pagenum-1)+1)|0; 
//根据当前要显示的页码取得当前面里最后一条记录的号码 
var pageEnd = record*pagenum; 
function showhiddenRecord(pagenum){ 
number.innerHTML=pagenum; 
if(pagenum<=1){ 
theFirstPage.innerHTML="第一页"; 
thePrePage.innerHTML="上一页"; 
}else{ 
theFirstPage.innerHTML="<a href=\"javascript:firstPage()\">第一页</a>"; 
thePrePage.innerHTML="<a href=\"javascript:prePage()\">上一页</a>"; 
} 
if(pagenum>=pageTotal){ 
theNextPage.innerHTML="下一页"; 
theLastPage.innerHTML="最后一页"; 
}else{ 
theNextPage.innerHTML="<a href=\"javascript:nextPage()\">下一页</a>"; 
theLastPage.innerHTML="<a href=\"javascript:lastPage()\">最后一页</a>"; 
} 
document.getElementById('goto').value=pagenum; 
//根据当前要显示的页码取得当前面里第一条记录的号码 
pageBegin = (record*(pagenum-1)+1)|0; 
//根据当前要显示的页码取得当前面里最后一条记录的号码 
pageEnd = record*pagenum; 
for(var i=1;i<=count;i++){ 
if(i>=pageBegin && i<=pageEnd){ 
mytable.rows[i].style.display=""; 
}else{ 
mytable.rows[i].style.display="none"; 
} 
} 
Cookie.Set("pagenum", pagenum); 
} 
function firstPage(){ 
pagenum=1; 
showhiddenRecord(pagenum); 
} 
function lastPage(){ 
showhiddenRecord(pageTotal); 
} 
//重新整理当前页码,如果页面小于1,则赋值为1,如果大于总页数,则等于总页数 
function coordinatePagenum(num){ 
if(num<1){ 
num="1"; 
}else if(num>pageTotal){ 
num=pageTotal; 
} 
} 
function prePage(){ 
pagenum--; 
coordinatePagenum(pagenum); 
showhiddenRecord(pagenum); 
} 
function nextPage(){ 
pagenum++; 
coordinatePagenum(pagenum); 
showhiddenRecord(pagenum); 
} 
function gotoPage(num){ 
coordinatePagenum(pagenum); 
showhiddenRecord(num); 
} 
//--> 
</SCRIPT> 
</HEAD> 
<BODY onLoad="showhiddenRecord(pagenum)"> 
<center> 
共 6 页 当前第 <span id="number">1</span> 页 
<span id="theFirstPage"><a href="javascript:firstPage()">第一页</a></span> 
<span id="thePrePage"><a href="javascript:prePage()">上一页</a></span> 
<span id="theNextPage"><a href="javascript:nextPage()">下一页</a></span> 
<span id="theLastPage"><a href="javascript:lastPage()">最后一页</a></span> 
转到第<select onChange="gotoPage(this.value)" name="goto"> 
<option value=1>1</option> 
<option value=2>2</option> 
<option value=3>3</option> 
<option value=4>4</option> 
<option value=5>5</option> 
<option value=6>6</option> 
</select>页 
</center> 
<TABLE id="mytable" cellpadding=4 cellspacing=1 border=0 bgcolor=#999999 width=500 align=center> 
<TR bgcolor=#ffffff><TD>标题</TD></TR> 
<TR bgcolor=#ffffff><TD>1</TD></TR> 
<TR bgcolor=#ffffff><TD>2</TD></TR> 
<TR bgcolor=#ffffff><TD>3</TD></TR> 
<TR bgcolor=#ffffff><TD>4</TD></TR> 
<TR bgcolor=#ffffff><TD>5</TD></TR> 
<TR bgcolor=#ffffff><TD>6</TD></TR> 
<TR bgcolor=#ffffff><TD>7</TD></TR> 
<TR bgcolor=#ffffff><TD>8</TD></TR> 
<TR bgcolor=#ffffff><TD>9</TD></TR> 
<TR bgcolor=#ffffff><TD>10</TD></TR> 
<TR bgcolor=#ffffff><TD>11</TD></TR> 
<TR bgcolor=#ffffff><TD>12</TD></TR> 
<TR bgcolor=#ffffff><TD>13</TD></TR> 
<TR bgcolor=#ffffff><TD>14</TD></TR> 
<TR bgcolor=#ffffff><TD>15</TD></TR> 
<TR bgcolor=#ffffff><TD>16</TD></TR> 
<TR bgcolor=#ffffff><TD>17</TD></TR> 
<TR bgcolor=#ffffff><TD>18</TD></TR> 
<TR bgcolor=#ffffff><TD>19</TD></TR> 
<TR bgcolor=#ffffff><TD>20</TD></TR> 
<TR bgcolor=#ffffff><TD>21</TD></TR> 
<TR bgcolor=#ffffff><TD>22</TD></TR> 
<TR bgcolor=#ffffff><TD>23</TD></TR> 
<TR bgcolor=#ffffff><TD>24</TD></TR> 
</TABLE> 
</BODY> 
</HTML>
Javascript 相关文章推荐
jQuery的运行机制和设计理念分析
Apr 05 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
用js实现博客打赏功能
Oct 24 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 #Javascript
jquery中animate动画积累的解决方法
Oct 05 #Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 #Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 #Javascript
javascript自启动函数的问题探讨
Oct 05 #Javascript
纯js简单日历实现代码
Oct 05 #Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 #Javascript
You might like
PHP写杨辉三角实例代码
2011/07/17 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
简易js代码实现计算器操作
2013/04/15 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
vue element项目引入icon图标的方法
2018/06/06 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
详解flask表单提交的两种方式
2018/07/21 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
pycharm实现猜数游戏
2020/12/07 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
城建学院毕业生自荐信
2014/01/31 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
初二学习计划书范文
2014/04/27 职场文书
年会邀请函范文
2015/01/30 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python