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库及其他库之间的$命名冲突
Sep 15 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
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
Yii调试SQL的常用方法
2014/07/09 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
代码详解django中数据库设置
2019/01/28 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
python实现QQ批量登录功能
2019/06/19 Python
python实现3D地图可视化
2020/03/25 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
冬季作息时间调整通知
2015/04/24 职场文书
紫日观后感
2015/06/05 职场文书
重阳节主题班会
2015/08/17 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python