Javascript表格翻页效果

最新推荐文章于 2023-10-27 23:06:30 发布
最新推荐文章于 2023-10-27 23:06:30 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： Javascript 文章标签： js表格翻页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vovo1122/article/details/12341441
版权

js代码实现表格翻页效果的。

例子：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>表格翻页---www.jbxue.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> 
转角遇到她
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用原生JS实现滚轮翻页效果的示例代码
11-20
一、滚轮事件 当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时，就会触发mousewheel事件，这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中，都提供了 “mousewheel” 事件，而 Firefox 3.5+ 中提供了一个等同的事件：”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个特殊属性—wheelDelta属性。 1、“mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向
Turn.js实现翻书效果
hhupp1809684284的博客
05-23 2951
trun.js的一份中文使用文档，相较于官方的文档，增加了一些自己理解的内容， 文章中展示的更多是常用的，一些本人无法理解的内容做了删减。
使用纯JavaScript实现翻页的功能
KeleQAQ的博客
05-12 3291
**前言：**初学JS，这个案例是我自己用来学习数组，AJAX,和DOM的。（这里没有用到AJAX！） **原理：**就是把对象储存在一个数组里，翻页显示就是通过数组下标截取数组里的元素。 **演示：** ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200512183326586.PNG) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200512183422485.PNG) ![在这里插入图片描述](https://im
纯JS+HTML+CSS实现表格增删改查翻页--模板文件管理
热门推荐
你的大数据学长
02-20 1万+
纯JS+HTML+CSS实现简单表格增删改查
使用js实现微信小页面翻页的原理介绍
weixin_34040079的博客
12-25 246
为什么80%的码农都做不了架构师？>>> ...
不错的Javascript表格翻页效果
10-30
不错的Javascript表格翻页效果
Javascript表格翻页效果实现思路及代码
10-26
表格翻页的实现方式有很多，下面以js为例为大家详细介绍下表格翻页效果的具体实现，感兴趣的朋友可以参考下
Javascript表格翻页效果的具体实现
10-26
表格翻页的实现方式有很多，下面以js为例为大家详细介绍下表格翻页效果的具体实现，感兴趣的朋友可不要错过
JS实现表格table无限滚动翻页
weixin_54685622的博客
11-23 2074
使用以下代码直接实现： 1 1 1 1 1 1 2 2 2 3 3 3 3 3
半小时，一篇文0基础让你轻松学会JS翻书效果
?sonder* 的博客
12-21 1933
如何使用CSS制作翻书效果？ css思路： 首先准备一个div作为书本，然后准备一个div作为第一页，其中还要有两个div作为正反面，分别对其各部分属性进行设置。其中还要为book与page开启3D，还用到了一个backface-visible（其实这个属性我之前没见到过，这是第一次用 ）属性，该属性用来设置当div翻转一定角度后是否可见，制作好第一页后，其余的几页与第一页类似。 注意： 要对每页...
JavaScript——滑动翻页功能（缓慢移动+无缝衔接）
我是我
07-28 2972
1. 需求+效果 展示 最近做开发时有这样一个需求，滚动播放列表，数据有限，当这些数据滚动播放结束后再重头开始，做完之后的效果是这样的 2. 实现代码(带标注) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
制作表格翻页以及js创建表格
wanghui_0924的博客
05-08 601
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;&lt;/title&gt;&lt;style type="text/css"&gt;    body{    }    table
js 翻书翻页效果
weixin_35749545的博客
02-02 686
为了实现 JS 翻书翻页效果，可以使用 CSS3 动画和 JS 交互。首先定义好 HTML 结构，然后使用 CSS3 的 transition 和 transform 属性实现动画效果，最后通过 JS 监听用户的操作并对页面做出相应的改变。代码实现细节可以参考一些现有的开源项目或教程。 ...
js练习 网页翻页条模拟 表格修改
最新发布
yamotl的博客
10-27 56
<td>序号</td><td>姓名</td><td>性别</td><td>操作</td>跳转</div>''<div class="st2">首页</div>'')">上一页
JavaScript实现列表分页（小白版）
分享Java，vue学学习笔记
03-26 2230
上方获li获取标签为8；这里是一个页面显示5条数据所以对pageLi进行取模；为0则是Math.floor不是则是Math.ceil，Math.floor是向下取整（ 1.6 => 1），Math.ceil为向上取整（1.6=>2 ），所以这里n最后等于2，页面为2。第一步：修改一下样式（一条li标签假如有40的高度，现在有8个则整个ul有320；我现在需要进行一个页面显示5条数据；第四步：对分页两个li做点击事件进行分页显示。在获取分页li进行样式设置。以ul列表为例进行分页。第三步：创建分页标签。
js翻页效果实现
kirsten_z的博客
10-24 1万+
1、说明 1）功能：实现书籍翻页效果 2）使用插件：turn.js2、示例 1）前提工作 – 需要提前计算数据总页数，提前生成需要的页数 – 初始化翻书插件 2）实践 html代码片段示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>翻书</title>
Javascript表格翻页
管子（zero）的杂乱空间
10-17 1520
表格翻页 body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover { color: #006600; } var record = 4;//每页显示多少条记录 var count = 24;//记录总数 var pageTotal = ((count+rec
html 表格 分页源码,JS代码实现table数据分页效果
weixin_34486033的博客
07-04 1827
第一个：实现的很常见很简单的显示页数翻页效果图：•这是HTML代码，很简单滴(我好像看到了被嫌弃的小眼神)姓名性别编号年龄张三男tom男李四男二蛋男二丫女•下面就是JS代码了$(function(){var $table=$('table');//获取表格对象var currentPage=;//设置当前页默认值为var pageSize=;//设置每一页要显示的数目$table.bind('pa...
JavaScript表格更新
05-24
要更新JavaScript表格，您需要先找到要更新的单元格，并将其值更改为新值。以下是一个基本的JavaScript代码示例，用于更新表格中的单元格： ```javascript // 查找要更新的单元格 var cell = document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值