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

更新时间：2013年08月23日 17:41:33 作者：

表格翻页的实现方式有很多，下面以js为例为大家详细介绍下表格翻页效果的具体实现，感兴趣的朋友可以参考下

 
<!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中函数的Currying柯里化
这篇文章主要介绍了JavaScript中函数的Currying柯里化,Currying 的重要意义在于可以把函数完全变成"接受一个参数、返回一个值"的固定形式,需要的朋友可以参考下
2016-03-03
微信小程序实现购物车选择规格颜色效果
这篇文章主要为大家详细介绍了微信小程序实现购物车选择规格颜色选中效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
B/S模式项目中常用的javascript汇总
本篇文章是对B/S模式项目中常用的javascript进行了汇总介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JavaScript实现x秒后自动跳转到一个页面
今天看视频学习时学习了一种新技术，即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面,在网上搜了一下，关于这个技术处理有多种方法,有兴趣的朋友可以参考下
2013-01-01
js实现仿微博滚动显示信息的效果
这篇文章主要介绍了js实现仿微博滚动显示信息的效果,通过由上往下滚动来实现不断显示微博的，而且每一天新微博都是通过淡入效果显示的,需要的朋友可以参考下
2015-12-12
js评分组件使用详解
这篇文章主要为大家介绍了js评分组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
详解微信小程序中数据双向绑定如何实现
最近在小程序的开发过程中,需要用到双向绑定,遇到报错才知道微信本身是不支持对象双向绑定的,鏖战一番找到解决方案,下面这篇文章主要给大家介绍了关于微信小程序中数据双向绑定如何实现的相关资料,需要的朋友可以参考下
2023-05-05
JavaScript数组some()函数的语法、用法与实战示例
JavaScript中的数组some()方法用于检查数组中是否至少有一个元素满足指定条件,这篇文章主要介绍了JavaScript数组some()函数的语法、用法与实战的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-03-03
JavaScript伪数组和数组的使用与区别
这篇文章主要给大家介绍了关于JavaScript伪数组和数组使用与区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
JS+CSS实现的拖动分页效果实例
这篇文章主要介绍了JS+CSS实现的拖动分页效果,可实现鼠标拖动页面翻转到上一页或下一页的功能,涉及javascript操作页面元素与css样式的相关技巧,需要的朋友可以参考下
2015-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具