<!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>
分享到:
相关推荐
### 不错的Javascript表格翻页效果 在网页开发中,数据展示是非常常见且重要的一个环节。当数据量较大时,采用分页展示可以显著提升用户体验,同时也减轻了服务器的压力。本篇文章将详细介绍一种利用纯JavaScript...
Javascript表格翻页效果的实现通常包括以下几个关键步骤和知识点: 1. 初始化配置信息:在代码中定义了若干变量,如每页显示记录数(record),总记录数(count),总页数(pageTotal),以及当前页码(pagenum)。...
在探讨如何使用Javascript实现表格翻页效果之前,首先需要了解翻页效果实现的基本思路。翻页通常是在数据量较大时,为了便于用户阅读和操作,将数据分批次在同一个表格内显示不同的数据片段。每一页显示一部分数据,...
使用JavaScript实现的用鼠标拖拽实现表格翻页的效果。
jQuery作为一个广泛使用的JavaScript库,提供了丰富的插件来帮助开发者实现各种功能,包括表格分页。本篇文章将深入探讨jQuery插件在实现表格分页中的应用及其相关知识点。 一、jQuery和表格分页基础 1. jQuery...
基于JavaScript的富客户端表格绘制库开发 摘要:本文介绍了一种基于JavaScript的富客户端表格绘制库的开发,旨在解决运维和开发工作中遇到的难题。该库实现了单元格事件绑定、翻页、单元格嵌入复杂模块、锁定表头表...
总的来说,"高效的JavaScript分页筛选TinyTable表格插件"是一个强大的工具,可以帮助开发者创建具有高性能和用户友好的数据展示界面。它不仅简化了前端开发流程,而且通过提供动态筛选和分页功能,提升了用户对大量...
"Table表格无刷新翻页排序"是一个利用JavaScript实现的技术方案,它允许用户在不重新加载整个页面的情况下,对表格进行分页浏览和内容排序,提升了用户体验。 首先,我们要理解这个技术的核心——AJAX...
原生JavaScript实现表格的翻页和跳转功能可以帮助我们有效地管理页面上的内容,提高用户体验。本篇将详细介绍如何使用JavaScript实现这一功能。 首先,我们需要一个HTML表格结构,包含表头(thead)、主体(tbody)...
这个压缩包文件"table表格无刷新翻页排序效果.zip"包含了一个实现无刷新翻页和排序功能的网页表格。在IT行业中,这种功能通常应用于数据展示和管理的场景,如后台管理系统、数据分析平台等。下面将详细介绍这个项目...
//是否翻页 sorter.currentidPre = "currentpagePre"; //当前页数(前) sorter.limitidPre = "pagelimitPre"; // 总页数(前) sorter.currentidAfter = "currentpageAfter"; //当前页数(后) sorter.limitidAfter = ...
此外,代码中有一个 `query` 函数,这是用于处理用户点击“查询”按钮或翻页链接后触发的 AJAX 请求,获取表格数据的函数。在这个例子中,`queryPage` 参数代表要查询的页码。如果没有提供,它将默认为当前页码。 ...
本文将深入探讨如何利用Webix实现数据表格的锁列、锁标题行、翻页、数据统计以及排序功能。 首先,**锁列** 是一种增强用户体验的方法,它允许用户在滚动数据时保持某些关键列始终可见。在Webix中,可以通过设置`...
uni-pagination组件用于实现页面的翻页功能,通常与表格或列表结合使用。它的主要属性包括: 1. **current**: 当前页码,设置或返回当前页。 2. **total**: 总条数,表示所有数据的总数。 3. **page-size**: 每页...
【标题】"纯CSS代码实现翻页焦点图效果.rar"所涵盖的知识点主要集中在CSS(层叠样式表)上,这种技术用于定义网页的布局和样式。在这个项目中,我们利用CSS来创建一个翻页焦点图的效果,这是一种常见的网页动态展示...
9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果(一) 9.38 类C# GridView的编辑效果(二) 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...
8.5.5 更改表格间隔背景色 219 第9章 JavaScript中的XML 223 9.1 XML语言 223 9.1.1 XML概述 223 9.1.2 XML文档结构 225 9.1.3 XML标记 226 9.1.4 XML文档元素 226 9.1.5 XML属性 229 9.1.6 XML命名空间 230 9.2 XML...