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上传插件 uploadify v3.1使用说明
Jun 18 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
JS实现简单九宫格抽奖
Jun 28 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
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
javascript 实现map集合
2015/04/03 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
应届生幼儿园求职信
2013/11/12 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
司机检讨书
2014/02/13 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
保护动物的标语
2014/06/11 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python