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 相关文章推荐
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
原生js实现碰撞检测
Mar 12 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
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
PHP中动态显示签名和ip原理
2007/03/28 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
教你如何使用php session
2013/10/28 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
Python计算一个文件里字数的方法
2015/06/15 Python
打包发布Python模块的方法详解
2016/09/18 Python
python与php实现分割文件代码
2017/03/06 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
python实现屏保计时器的示例代码
2018/08/08 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
python实现滑雪者小游戏
2020/02/22 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python