Javascript表格翻页

HTML表格翻页功能实现
最新推荐文章于 2021-06-16 20:48:06 发布
最新推荐文章于 2021-06-16 20:48:06 发布 · 428 阅读 · 0
文章标签：

#JavaScript #prototype #ViewUI

本文介绍了一种使用HTML和JavaScript实现的简单表格翻页功能。通过设置每页显示的记录数，用户可以轻松地浏览长表格的不同部分。代码中包含了设置和获取页码的Cookie功能，以及用于导航至第一页、上一页、下一页和最后一页的函数。
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>表格翻页</TITLE>
<style>
body,td{
font-size:9pt;
}
a:link{
color:#FF0000;
}
a:visited{
color:#FF0000;
}
a:hover{
color:#006600;
}
</style>
<SCRIPTLANGUAGE="JavaScript">
<!--
varrecord=4;//每页显示多少条记录
varcount=24;//记录总数
varpageTotal=((count+record-1)/record)|0;//总页数
varpagenum=1;//将要显示的页码

Cookie={
Set:function(){
varname=arguments[0],value=escape(arguments[1]),days=365,path="/";
if(arguments.length>2)days=arguments[2];
if(arguments.length>3)path=arguments[3];
with(newDate()){
setDate(getDate()+days);
days=toUTCString();
}
document.cookie="{0}={1};expires={2};path={3}".format(name,value,days,path);
},
Get:function(){
varreturnValue=document.cookie.match(newRegExp("[\b\^;]?"+arguments[0]+"=([^;]*)(?=;|\b|$)","i"));
returnreturnValue?unescape(returnValue[1]):returnValue;
}
}
String.prototype.format=function(){
vartmpStr=this;
variLen=arguments.length;
for(vari=0;i<iLen;i++){
tmpStr=tmpStr.replace(newRegExp("\\{"+i+"\\}","g"),arguments[i]);
}
returntmpStr;
}
functionsetPagenum(){//整理Cookie
pagenum=Cookie.Get("pagenum");
if(pagenum==""||pagenum<1){
pagenum=1;
}
}

setPagenum();

//重新整理当前页码，如果页面小于1，则赋值为1，如果大于总页数，则等于总页数
coordinatePagenum(pagenum);

//根据当前要显示的页码取得当前面里第一条记录的号码
varpageBegin=(record*(pagenum-1)+1)|0;

//根据当前要显示的页码取得当前面里最后一条记录的号码
varpageEnd=record*pagenum;

functionshowhiddenRecord(pagenum){
number.innerHTML=pagenum;
if(pagenum<=1){
theFirstPage.innerHTML="第一页";
thePrePage.innerHTML="上一页";
}else{
theFirstPage.innerHTML="<ahref=\"javascript:firstPage()\">第一页</a>";
thePrePage.innerHTML="<ahref=\"javascript:prePage()\">上一页</a>";
}
if(pagenum>=pageTotal){
theNextPage.innerHTML="下一页";
theLastPage.innerHTML="最后一页";
}else{
theNextPage.innerHTML="<ahref=\"javascript:nextPage()\">下一页</a>";
theLastPage.innerHTML="<ahref=\"javascript:lastPage()\">最后一页</a>";
}
document.getElementById('goto').value=pagenum;
//根据当前要显示的页码取得当前面里第一条记录的号码
pageBegin=(record*(pagenum-1)+1)|0;

//根据当前要显示的页码取得当前面里最后一条记录的号码
pageEnd=record*pagenum;
for(vari=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);
}

functionfirstPage(){
pagenum=1;
showhiddenRecord(pagenum);
}

functionlastPage(){
showhiddenRecord(pageTotal);
}

//重新整理当前页码，如果页面小于1，则赋值为1，如果大于总页数，则等于总页数
functioncoordinatePagenum(num){
if(num<1){
num="1";
}elseif(num>pageTotal){
num=pageTotal;
}
}

functionprePage(){
pagenum--;
coordinatePagenum(pagenum);
showhiddenRecord(pagenum);
}

functionnextPage(){
pagenum++;
coordinatePagenum(pagenum);
showhiddenRecord(pagenum);
}

functiongotoPage(num){
coordinatePagenum(pagenum);
showhiddenRecord(num);
}
//-->
</SCRIPT>
</HEAD>

<BODYonLoad="showhiddenRecord(pagenum)">
<center>
共6页当前第<spanid="number">1</span>页
<spanid="theFirstPage"><ahref="javascript:firstPage()">第一页</a></span>
<spanid="thePrePage"><ahref="javascript:prePage()">上一页</a></span>
<spanid="theNextPage"><ahref="javascript:nextPage()">下一页</a></span>
<spanid="theLastPage"><ahref="javascript:lastPage()">最后一页</a></span>
转到第<selectonChange="gotoPage(this.value)"name="goto">
<optionvalue=1>1</option>
<optionvalue=2>2</option>
<optionvalue=3>3</option>
<optionvalue=4>4</option>
<optionvalue=5>5</option>
<optionvalue=6>6</option>
</select>页
</center>
<br>
<br>
<TABLEid="mytable"cellpadding=4cellspacing=1border=0bgcolor=#999999width=500align=center>
<TRbgcolor=#ffffff><TD>标题</TD></TR>
<TRbgcolor=#ffffff><TD>1</TD></TR>
<TRbgcolor=#ffffff><TD>2</TD></TR>
<TRbgcolor=#ffffff><TD>3</TD></TR>
<TRbgcolor=#ffffff><TD>4</TD></TR>
<TRbgcolor=#ffffff><TD>5</TD></TR>
<TRbgcolor=#ffffff><TD>6</TD></TR>
<TRbgcolor=#ffffff><TD>7</TD></TR>
<TRbgcolor=#ffffff><TD>8</TD></TR>
<TRbgcolor=#ffffff><TD>9</TD></TR>
<TRbgcolor=#ffffff><TD>10</TD></TR>
<TRbgcolor=#ffffff><TD>11</TD></TR>
<TRbgcolor=#ffffff><TD>12</TD></TR>
<TRbgcolor=#ffffff><TD>13</TD></TR>
<TRbgcolor=#ffffff><TD>14</TD></TR>
<TRbgcolor=#ffffff><TD>15</TD></TR>
<TRbgcolor=#ffffff><TD>16</TD></TR>
<TRbgcolor=#ffffff><TD>17</TD></TR>
<TRbgcolor=#ffffff><TD>18</TD></TR>
<TRbgcolor=#ffffff><TD>19</TD></TR>
<TRbgcolor=#ffffff><TD>20</TD></TR>
<TRbgcolor=#ffffff><TD>21</TD></TR>
<TRbgcolor=#ffffff><TD>22</TD></TR>
<TRbgcolor=#ffffff><TD>23</TD></TR>
<TRbgcolor=#ffffff><TD>24</TD></TR>
</TABLE>
</BODY>
</HTML>
iteye_6481
关注
原生js实现表格翻页和跳转
weixin_43756316的博客
07-17 903
js代码里的row_num变量是显示数据的行数，修改后可改变每页显示的数量。 html代码： <table border="" cellspacing="" cellpadding="" id="table"> <thead> <tr> <td>No</td> <td>Name</td> <td>Age</td> </tr> </thead> .
js实现table翻页功能
07-13
使用 js 实现html table 的假分页，列的值，可以用ajax异步获取拼成json字符串后前台设值
Javascript表格翻页效果
郭晓湉
08-23 2327
表格翻页 body, td{     font-size: 9pt; } a:link {     color: #FF0000; } a:visited {     color: #FF0000; } a:hover {     color: #006600; } var record = 4;//每页显示多少条记录
制作表格翻页以及js创建表格
wanghui_0924的博客
05-08 705
&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_30808253的博客
07-30 1159
转载自：https://www.cnblogs.com/tengyijun/p/10465811.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http:...
不错的Javascript表格翻页效果
10-30
### 不错的Javascript表格翻页效果 在网页开发中，数据展示是非常常见且重要的一个环节。当数据量较大时，采用分页展示可以显著提升用户体验，同时也减轻了服务器的压力。本篇文章将详细介绍一种利用纯JavaScript...
Javascript表格翻页效果的具体实现
10-26
Javascript表格翻页效果的实现通常包括以下几个关键步骤和知识点： 1. 初始化配置信息：在代码中定义了若干变量，如每页显示记录数（record），总记录数（count），总页数（pageTotal），以及当前页码（pagenum）。...
Javascript表格翻页效果实现思路及代码
10-26
在探讨如何使用Javascript实现表格翻页效果之前，首先需要了解翻页效果实现的基本思路。翻页通常是在数据量较大时，为了便于用户阅读和操作，将数据分批次在同一个表格内显示不同的数据片段。每一页显示一部分数据，...
javascript可编辑分页表格控件
02-11
一个js的表格控件，采用缓存的机制实现表格分页，并且支持单元格编辑等多种功能，详情联系Q:344293750
纯js实现表格分页
10-16
使用纯JavaScript实现表格分页显示，提供页面跳转功能，包括首页、上一页、下一页、尾页等功能。
js实现固定表头表列和表格翻页
03-06
功能特色： 1. 实现表格的列排序功能（点击表头，切换该列升降序），也可以指定哪一列不排序； 2. 实现当前排序列高亮显示； 3. 实现表格奇偶行不同颜色，即换行变色； 4. 实现表格分页功能，可指定是否开启分页功能及每页行数； 5. 排序数据支持数据类型自动识别（这点很强大）。例如：整型数据、浮点型数据、字母、电话号码、日期、链接 6. 表格外观样式可通过CSS灵活定制 7. 所需要引用的js文件非常小巧，压缩版仅2.5k 8. 使用非常简单，可进行参数配置
js+table分页
01-21
js+table分页实现，压缩包里有一个.html文件一个jQuery包，下载后可直接打开html文件，实现的功能包括：当前页、数据总量、页数、首页、上一页、下一页、尾页、页数跳转，只是功能实现没写css做美化
用bootstrap_table实现html 表格翻页
weixin_30699831的博客
11-19 1318
资料网址 百度经验：HTML表格分页，table分页怎么做？ 官网（下载链接和官方教程） （右上角可选语言） 文档 以下内容基本摘自官网 用法 1.下载资料 官网下载： 下下来长这样： 其中src里面是源码，主要用到bootstrap-table.css & bootstrap-table.js 和local文件夹中对应当地语言的文件，比如中文： bootstrap-table-zh-...
html表格翻页简单,利用jQuery实现一个简单的表格上下翻页效果
weixin_34082139的博客
06-07 1139
前言本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果，注：实现原理与轮播图相似。下面话不多说，来看看详细的 实现方法吧。html:日期参与团购场次团购结果当前状态02.08第一场成功现金券已发放02.09第二场失败G币已退回02.10第三场团购中团购中02.11第一场成功现金券已发放02.12第二场成功现金券已发放02.13第二场成功现金券已发放02.14第二场成功现金券已发放02....
表格设置翻页 html,使用原生JS实现表格数据的翻页功能
weixin_34722015的博客
06-16 1772
使用原生JS实现如下图所示表格数据的翻页功能：HTML代码：表格标题《》简单处理一下样式，CSS代码：#pagination {text-align: center;}#table {width: 800px;margin: 50px auto;}#table th {height: 35px;}#title {text-align: center;}button {padding: 5px;bo...
HTML表格翻页效果-洋葱先生-杨少通
前端小白的逆袭
10-21 2495
HTML表格翻页效果-洋葱先生-杨少通
Html表格分页
热门推荐
月色无痕的专栏
12-26 1万+
无标题文档 第一页 上一页 下一页 最后一页 第页/共页 lishewen 1 算神       2         3    
JavaScript实现HTML表格分页功能
这个类的目的是为了把一个静态生成的HTML表格改造为具有分页功能的动态表格，允许用户通过翻页来浏览表格数据。这个过程不依赖于服务器端技术，也不使用Ajax进行数据的动态加载。这意味着所有的分页逻辑都将通过...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值