Javascript表格翻页效果

最新推荐文章于 2022-08-22 07:45:09 发布
最新推荐文章于 2022-08-22 07:45:09 发布
阅读量2.2k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xtqueen/article/details/10213171
版权
<!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表格翻页效果实现思路及代码
转角遇到她的专栏
08-24 1557
表格翻页的实现方式有很多，下面以js为例为大家详细介绍下表格翻页效果的具体实现。 表格翻页---www.jbxue.com body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover { color: #006600; } <!-- var record =
js实现table翻页功能
07-13
使用 js 实现html table 的假分页，列的值，可以用ajax异步获取拼成json字符串后前台设值
Javascript表格翻页
web开发自学
10-17 395
&lt;!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;表格翻页&lt;/TITLE&gt; &lt;style&gt; body,td{ font-size:9pt; } a:link{ color:#FF0000; } a:visited{ c
使用原生JS实现表格数据的翻页功能
weixin_30808253的博客
07-30 1106
转载自：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表格翻页效果的具体实现
12-10
表格翻页的实现方式有很多，下面以js为例为大家详细介绍下表格翻页效果的具体实现。 代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE>表格翻页—www.jb51.net</TITLE> <style> body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover { color: #006600; } </style> <SCRIPT LANG
不错的Javascript表格翻页效果
10-30
### 不错的Javascript表格翻页效果 在网页开发中，数据展示是非常常见且重要的一个环节。当数据量较大时，采用分页展示可以显著提升用户体验，同时也减轻了服务器的压力。本篇文章将详细介绍一种利用纯JavaScript...
js+table分页
01-21
js+table分页实现，压缩包里有一个.html文件一个jQuery包，下载后可直接打开html文件，实现的功能包括：当前页、数据总量、页数、首页、上一页、下一页、尾页、页数跳转，只是功能实现没写css做美化
原生js实现表格翻页和跳转
01-18
本文实例为大家分享了js实现表格翻页和跳转的具体代码，供大家参考，具体内容如下 js代码里的row_num变量是显示数据的行数，修改后可改变每页显示的数量。 html代码： <table xss=removed xss=removed xss=removed id=table> <thead> <tr> <td>No</td> <td>Name</td> <td>Age</td> </tr> </thead> <tbody></tbody> <tfoot> <tr> <td colspan=3> <input type=button n
js实现table分页
05-23
js实现table分页，有首页、上一页、第几页、下一页、末页、定位到第几页 资源来源于网上，我仅仅少做整理，感谢资源共享
制作表格翻页以及js创建表格
wanghui_0924的博客
05-08 649
&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真好玩] 遇到表格，手动翻页太麻烦？我教你写脚本，一页展示所有数据
Hull Qin
08-22 1910
你一定见过表格，但有的表格不支持搜索、按列排序，怎么办？如果表格一页能展示所有数据，这就好办了！本文提供了一种解决方法，让你通过JS，使表格一页展示所有数据，免去翻页的烦恼！
前端从后端动态获取数据，显示到html表格，并实现翻页，前端使用html编写，后端使用js，后端读取csv文件数据
blake32的博客
04-14 1万+
html动态表格数据分页展示，ajax从后端获取数据，后端采用js+express读取csv文件，并监听前端请求，动态发送分页数据到前端。
纯JS+HTML+CSS实现表格增删改查翻页--模板文件管理
热门推荐
你的大数据学长
02-20 1万+
纯JS+HTML+CSS实现简单表格增删改查
表格设置翻页 html,使用原生JS实现表格数据的翻页功能
weixin_34722015的博客
06-16 1630
使用原生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...
Web APIs 事件监听(绑定)
m0_68331234的博客
04-08 263
事件监听(绑定) 事件：事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。 例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片 事件监听：结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。 语法：元素对象.addEventListener(‘事件类型’，要执行的函数) 事件监听三要素: 事件源: 那个dom元素被事件触发了，要获取dom元素事件类型:用什么方
html局部翻页效果
最新发布
09-06
要实现HTML局部翻页效果，可以使用JavaScript来实现。一种常见的实现方式是通过使用CSS的overflow属性及JavaScript来控制显示的内容。 具体实现步骤如下： 1. 创建一个包含要显示的内容的HTML元素，例如一个div元素，设置它的高度和宽度，以及overflow属性为"auto"或"scroll"，这样当内容超过元素的尺寸时会显示滚动条。 2. 在页面中设置两个按钮，一个用于向前翻页，一个用于向后翻页。 3. 使用JavaScript来监听按钮的点击事件。 4. 当向前按钮被点击时，使用JavaScript来将div元素的scrollTop属性减去一个固定值，以实现向前翻页的效果。 5. 当向后按钮被点击时，使用JavaScript来将div元素的scrollTop属性加上一个固定值，以实现向后翻页的效果。 这样，当用户点击向前或向后按钮时，div元素的内容会根据scrollTop属性的改变而实现局部翻页效果。 参考资料： <<HTML局部翻页效果实现>><span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Javascript表格翻页效果的具体实现](https://download.csdn.net/download/weixin_38675746/13617001)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Bootstrap实现翻页效果](https://download.csdn.net/download/weixin_38691970/14806542)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [(html)图片局部特写效果](https://blog.csdn.net/weixin_39790877/article/details/117813526)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值