<title>动态html分页</title><style>
* {
font-size:10.2pt;
font-family:tahoma;
line-height:150%;
}
.divContent
{
border:1px solid red;
background-color:#FFD2D3;
width:500px;
word-break:break-all;
margin:10px 0px 10px;
padding:10px;
}
</style>
header
<div id="divContent"></div>
<div id="divPagenation"></div>
<div id="divContentTest" style="display: none;">文章正文</div>
<script language="JavaScript">
<!--
s= document.getElementById("divContentTest").innerHTML;
function DHTMLpagenation(content) { with (this)
{
// client static html file pagenation
this.content=content;
this.contentLength=content.length;
this.pageSizeCount;
this.perpageLength=400; //default perpage byte length.
this.currentPage=1;
//this.regularExp=/.+[\?\&]{1}page=(\d+)/;
this.regularExp=/\d+/;
this.divDisplayContent;
this.contentStyle=null;
this.strDisplayContent="";
this.divDisplayPagenation;
this.strDisplayPagenation="";
arguments.length==2?perpageLength=arguments[1]:'';
try {
divExecuteTime=document.createElement("DIV");
document.body.appendChild(divExecuteTime);
}
catch(e)
{
}
if(document.getElementById("divContent"))
{
divDisplayContent=document.getElementById("divContent");
}
else
{
try
{
divDisplayContent=document.createElement("DIV");
divDisplayContent.id="divContent";
document.body.appendChild(divDisplayContent);
}
catch(e)
{
return false;
}
}
if(document.getElementById("divPagenation"))
{
divDisplayPagenation=document.getElementById("divPagenation");
}
else
{
try
{
divDisplayPagenation=document.createElement("DIV");
divDisplayPagenation.id="divPagenation";
document.body.appendChild(divDisplayPagenation);
}
catch(e)
{
return false;
}
}
DHTMLpagenation.initialize();
return this;
}};
DHTMLpagenation.initialize=function() { with (this)
{
divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";
if(contentLength<=perpageLength)
{
strDisplayContent=content;
divDisplayContent.innerHTML=strDisplayContent;
return null;
}
pageSizeCount=Math.ceil((contentLength/perpageLength));
DHTMLpagenation.goto(currentPage);
DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayPage=function() { with (this)
{
strDisplayPagenation="分页:";
if(currentPage&&currentPage!=1)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>&nbsp;&nbsp;';
else
strDisplayPagenation+="上一页&nbsp;&nbsp;";
for(var i=1;i<=pageSizeCount;i++)
{
if(i!=currentPage)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';
else
strDisplayPagenation+=i+"&nbsp;&nbsp;";
}
if(currentPage&&currentPage!=pageSizeCount)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>&nbsp;&nbsp;';
else
strDisplayPagenation+="下一页&nbsp;&nbsp;";
strDisplayPagenation+="共 " + pageSizeCount + " 页每页" + perpageLength + " 字符,调整字符数:<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'>";
divDisplayPagenation.innerHTML=strDisplayPagenation;
}};
DHTMLpagenation.previous=function() { with(this)
{
DHTMLpagenation.goto(currentPage-1);
}};
DHTMLpagenation.next=function() { with(this)
{
DHTMLpagenation.goto(currentPage+1);
}};
DHTMLpagenation.goto=function(iCurrentPage) { with (this)
{
startime=new Date();
if(regularExp.test(iCurrentPage))
{
currentPage=iCurrentPage;
strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
}
else
{
alert("page parameter error!");
}
DHTMLpagenation.displayContent();
DHTMLpagenation.displayPage();
}};
DHTMLpagenation.displayContent=function() { with (this)
{
divDisplayContent.innerHTML=strDisplayContent;
}};
DHTMLpagenation.change=function(iPerpageLength) { with(this)
{
if(regularExp.test(iPerpageLength))
{
DHTMLpagenation.perpageLength=iPerpageLength;
DHTMLpagenation.currentPage=1;
DHTMLpagenation.initialize();
}
else
{
alert("请输入数字");
}
}};
// method
// DHTMLpagenation(strContent,perpageLength)
DHTMLpagenation(s,300);
//-->
</script>
分享到:
相关推荐
在这个"js+ajax动态分页.rar"压缩包中,包含了一个实现这一功能的实例,对于初学者来说非常有帮助,因为注释详尽,易于理解。 动态分页是网页设计中的一个重要组成部分,尤其是在数据量庞大的情况下,如新闻列表、...
本示例提供的"JS+HTML分页代码"是一个利用JavaScript(JS)和超文本标记语言(HTML)实现的分页功能,主要包含了首页、前页、后页、尾页以及自定义分页页号的功能。 **HTML基础**: HTML是网页的基础,用于构建页面...
本教程将详细讲解如何使用jQuery库来实现表格的动态分页,同时结合Java后端进行数据的动态查询和分页处理。 首先,让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时,仅加载当前显示的数据,...
标题所指的知识点为:利用JavaScript(简称js)技术来实现HTML表格(table)的分页功能。在前端开发中,分页是一种常见的数据展示模式,用于在有限的页面空间内展示大量数据。当需要展示的数据量太大,一次性加载到...
本篇文章将详细探讨如何使用JavaScript(js)脚本来实现客户端的分页功能。 首先,我们需要理解分页的基本原理。分页是将一个大数据集分成多个较小的部分,每个部分称为一页。用户每次只看到一页的数据,通过点击...
总结一下,实现JavaScript动态分页表格的关键步骤包括: 1. 创建HTML结构,包括表格和分页导航。 2. 在JavaScript中处理数据分页逻辑,包括计算总页数、显示指定页数据和处理分页按钮事件。 3. 获取数据,可能是从...
在这个主题中,我们将深入探讨"分页js"的相关知识点,包括分页的基本原理、JavaScript实现分页的方法、以及如何结合CSS(如`pageNav.css`)优化分页的样式。 首先,我们要理解分页的基本概念。分页通常用于显示...
在这个“ajax动态分页的DEMO”中,我们将深入探讨如何结合Ajax、JavaScript和MySQL数据库实现这一功能。 ### 1. Ajax基础 Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换...
这通常通过AJAX(异步JavaScript和XML)实现,向服务器发送请求获取特定页的数据,然后动态更新HTML元素。在本Demo中,JavaScript可能包括绑定点击事件、计算页码、更新页面内容等函数。 PHP作为服务器端脚本语言,...
本主题将深入探讨如何使用JAVA、JavaScript(JS)和HTML来实现分页功能。 首先,我们来看JAVA部分。在JAVA中,分页通常与数据库操作结合,如JDBC或者ORM框架(如Hibernate或MyBatis)一起工作。以下是一些关键概念...
在JavaScript(JS)中,控制分页打印是一个常见的需求,特别是在网页开发中。这涉及到将大量数据分成可管理的小块,以便用户可以逐页查看和打印。本文将深入探讨JavaScript如何实现这一功能,并结合标签“源码”和...
而 `js` 文件则包含了主要的 JavaScript 逻辑,特别是实现分页功能的 jQuery 代码。 在实际开发中,还需要注意以下几点: - **数据格式**:服务器返回的数据格式可能为 JSON、XML 或纯文本,需要根据实际情况解析...
这个类允许我们将已有的HTML表格转换为具有分页和查询功能的交互式表格,完全使用JavaScript实现,不依赖任何后台技术,也不使用AJAX。 首先,我们需要理解JavaScript在其中的作用。JavaScript是一种客户端脚本语言...
JavaScript(简称js)是网页开发中的重要脚本语言,可以用来实现动态的、交互式的分页功能。本文将深入探讨如何使用JavaScript实现简单分页,并结合提供的分页模块进行分析。 首先,我们要理解分页的基本原理。分页...
在项目中,你还可以使用现成的分页库,如jQuery的`bootstrap-paginator`或纯JavaScript的`paginator.js`,来简化开发过程。 总的来说,JavaScript分页涉及前端数据处理和用户体验优化,理解其原理和实现方式对于Web...
总的来说,这个压缩包提供了一个完整的jQuery动态分页解决方案,包括前端HTML结构、CSS样式以及JavaScript逻辑。开发者可以通过调整相关参数和样式,根据具体需求定制分页效果,以满足不同应用场景。在实际开发中,...
2. Pagination.js:一个独立的JavaScript分页库,支持自定义分页样式,支持Ajax请求数据。 3. vue-paginate:针对Vue.js框架的分页组件,易用且高度可定制。 4. react-pagination:适用于React应用的分页组件,可与...
JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,包括实现动态内容、用户交互、页面行为控制等。在大型数据展示或者列表展示时,为了提高用户体验,通常会采用分页功能来将大量数据分块...
- **无刷新**:无刷新分页是指用户在点击分页按钮时,页面内容动态更新,但整个页面不会重新加载,这主要通过JavaScript来实现。 ### 2. 实现原理 - **DOM操作**:JavaScript通过操作DOM(Document Object Model)...