`
javafan_303
  • 浏览: 957140 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js html动态分页

    博客分类:
  • ajax
阅读更多
<title>动态html分页</title>&lt;style&gt;
* {
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;
}
&lt;/style&gt;
header
<div id="divContent"></div>
<div id="divPagenation"></div>

<div id="divContentTest" style="display: none;">文章正文</div>
&lt;script language="JavaScript"&gt;
&lt;!--
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=/.+[\?\&amp;]{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&lt;=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&amp;&amp;currentPage!=1)
		strDisplayPagenation+='&lt;a href="javascript:void(0)" onclick="DHTMLpagenation.previous()"&gt;上一页&lt;/a&gt;&amp;nbsp;&amp;nbsp;';
	else
		strDisplayPagenation+="上一页&amp;nbsp;&amp;nbsp;";

	for(var i=1;i&lt;=pageSizeCount;i++)
	{
		if(i!=currentPage)
			strDisplayPagenation+='&lt;a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');"&gt;'+i+'&lt;/a&gt;&amp;nbsp;&amp;nbsp;';
		else
			strDisplayPagenation+=i+"&amp;nbsp;&amp;nbsp;";
	}

	if(currentPage&amp;&amp;currentPage!=pageSizeCount)
		strDisplayPagenation+='&lt;a href="javascript:void(0)" onclick="DHTMLpagenation.next()"&gt;下一页&lt;/a&gt;&amp;nbsp;&amp;nbsp;';
	else
		strDisplayPagenation+="下一页&amp;nbsp;&amp;nbsp;";

	strDisplayPagenation+="共 " + pageSizeCount + " 页每页" + perpageLength + " 字符,调整字符数:&lt;input type='text' value='"+perpageLength+"' id='ctlPerpageLength'&gt;&lt;input type='button' value='确定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'&gt;";

	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);

//--&gt;
&lt;/script&gt;

 

分享到:
评论

相关推荐

    js+ajax动态分页.rar

    在这个"js+ajax动态分页.rar"压缩包中,包含了一个实现这一功能的实例,对于初学者来说非常有帮助,因为注释详尽,易于理解。 动态分页是网页设计中的一个重要组成部分,尤其是在数据量庞大的情况下,如新闻列表、...

    JS+HTML分页代码

    本示例提供的"JS+HTML分页代码"是一个利用JavaScript(JS)和超文本标记语言(HTML)实现的分页功能,主要包含了首页、前页、后页、尾页以及自定义分页页号的功能。 **HTML基础**: HTML是网页的基础,用于构建页面...

    使用jquery实现表格动态分页

    本教程将详细讲解如何使用jQuery库来实现表格的动态分页,同时结合Java后端进行数据的动态查询和分页处理。 首先,让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时,仅加载当前显示的数据,...

    利用js制作html table分页示例(js实现分页)

    标题所指的知识点为:利用JavaScript(简称js)技术来实现HTML表格(table)的分页功能。在前端开发中,分页是一种常见的数据展示模式,用于在有限的页面空间内展示大量数据。当需要展示的数据量太大,一次性加载到...

    js分页,使用js脚本产生分页的html代码

    本篇文章将详细探讨如何使用JavaScript(js)脚本来实现客户端的分页功能。 首先,我们需要理解分页的基本原理。分页是将一个大数据集分成多个较小的部分,每个部分称为一页。用户每次只看到一页的数据,通过点击...

    js实现table分页可以动态生成table

    总结一下,实现JavaScript动态分页表格的关键步骤包括: 1. 创建HTML结构,包括表格和分页导航。 2. 在JavaScript中处理数据分页逻辑,包括计算总页数、显示指定页数据和处理分页按钮事件。 3. 获取数据,可能是从...

    分页js文件

    在这个主题中,我们将深入探讨"分页js"的相关知识点,包括分页的基本原理、JavaScript实现分页的方法、以及如何结合CSS(如`pageNav.css`)优化分页的样式。 首先,我们要理解分页的基本概念。分页通常用于显示...

    ajax动态分页的DEMO

    在这个“ajax动态分页的DEMO”中,我们将深入探讨如何结合Ajax、JavaScript和MySQL数据库实现这一功能。 ### 1. Ajax基础 Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换...

    html+js+php+mysql实现分页

    这通常通过AJAX(异步JavaScript和XML)实现,向服务器发送请求获取特定页的数据,然后动态更新HTML元素。在本Demo中,JavaScript可能包括绑定点击事件、计算页码、更新页面内容等函数。 PHP作为服务器端脚本语言,...

    JAVA分页实现JAVA+JS+HTML

    本主题将深入探讨如何使用JAVA、JavaScript(JS)和HTML来实现分页功能。 首先,我们来看JAVA部分。在JAVA中,分页通常与数据库操作结合,如JDBC或者ORM框架(如Hibernate或MyBatis)一起工作。以下是一些关键概念...

    js javascript js控制分页打印,打印分页

    在JavaScript(JS)中,控制分页打印是一个常见的需求,特别是在网页开发中。这涉及到将大量数据分成可管理的小块,以便用户可以逐页查看和打印。本文将深入探讨JavaScript如何实现这一功能,并结合标签“源码”和...

    jquery动态分页数据获取代码

    而 `js` 文件则包含了主要的 JavaScript 逻辑,特别是实现分页功能的 jQuery 代码。 在实际开发中,还需要注意以下几点: - **数据格式**:服务器返回的数据格式可能为 JSON、XML 或纯文本,需要根据实际情况解析...

    一个对html表格分页的类

    这个类允许我们将已有的HTML表格转换为具有分页和查询功能的交互式表格,完全使用JavaScript实现,不依赖任何后台技术,也不使用AJAX。 首先,我们需要理解JavaScript在其中的作用。JavaScript是一种客户端脚本语言...

    使用js实现简单分页

    JavaScript(简称js)是网页开发中的重要脚本语言,可以用来实现动态的、交互式的分页功能。本文将深入探讨如何使用JavaScript实现简单分页,并结合提供的分页模块进行分析。 首先,我们要理解分页的基本原理。分页...

    js分页示例,前台分页,客户端分页,分页机制,js分页

    在项目中,你还可以使用现成的分页库,如jQuery的`bootstrap-paginator`或纯JavaScript的`paginator.js`,来简化开发过程。 总的来说,JavaScript分页涉及前端数据处理和用户体验优化,理解其原理和实现方式对于Web...

    jQuery固定数量动态分页代码.zip

    总的来说,这个压缩包提供了一个完整的jQuery动态分页解决方案,包括前端HTML结构、CSS样式以及JavaScript逻辑。开发者可以通过调整相关参数和样式,根据具体需求定制分页效果,以满足不同应用场景。在实际开发中,...

    js分页javascript分页

    2. Pagination.js:一个独立的JavaScript分页库,支持自定义分页样式,支持Ajax请求数据。 3. vue-paginate:针对Vue.js框架的分页组件,易用且高度可定制。 4. react-pagination:适用于React应用的分页组件,可与...

    js分页功能 js分页功能

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,包括实现动态内容、用户交互、页面行为控制等。在大型数据展示或者列表展示时,为了提高用户体验,通常会采用分页功能来将大量数据分块...

    js无刷新分页代码

    - **无刷新**:无刷新分页是指用户在点击分页按钮时,页面内容动态更新,但整个页面不会重新加载,这主要通过JavaScript来实现。 ### 2. 实现原理 - **DOM操作**:JavaScript通过操作DOM(Document Object Model)...

Global site tag (gtag.js) - Google Analytics