Javascript表格翻页效果实现思路及代码


Posted in Javascript onAugust 23, 2013
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>表格翻页</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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
纯javascript版日历控件
Nov 24 Javascript
ES6数组的扩展详解
Apr 25 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
jquery $.each() 使用小探
Aug 23 #Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 #Javascript
checkbox使用示例
Aug 23 #Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 #Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 #Javascript
JS获取地址栏参数的小例子
Aug 23 #Javascript
jquery利用ajax调用后台方法实例
Aug 23 #Javascript
You might like
php4的session功能评述(三)
2006/10/09 PHP
PHP伪造referer实例代码
2008/09/20 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
python3.3实现乘法表示例
2014/02/07 Python
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
应届本科生推荐信范文
2013/12/25 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
干部现实表现材料
2014/02/13 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
药剂专业求职信
2014/06/20 职场文书
我们的节日春节活动方案
2014/08/22 职场文书