JavaScript菜鸟之翻页链接的的简单实现

1、PageDiv.js文件内容：

// JavaScript Document 翻页功能

window.οnlοad=Load;
window.οnunlοad=Unload;

var PageDiv=null;
var curPage=1;//当前页号
var pageItemsNum=0;//每页显示多少条目
var totalItemsNum=0;//总条目
var totalPages=0;//总页数
var searchString="";//查询字符串

function Load()
{
	PageDiv=document.getElementById("PageDiv");
	var vParam=PageDiv.innerHTML.split("|");//通过div元素的innerHTML来传递相关参数
	curPage=vParam[0];
	pageItemsNum=vParam[1];
	totalItemsNum=vParam[2];
	searchString=vParam[3];
	totalPages=parseInt(totalItemsNum/pageItemsNum);
	if((totalItemsNum%pageItemsNum)!=0)
	{
		++totalPages;
	}
	vParam=null;
	SetHtml(PageDiv);
	SetLink();
}


function Unload()
{
	PageDiv=null;
}

function SetHtml(targ)
{
	var strHtml="首页 ";
	strHtml+="上一页 ";
	strHtml+=" ";
	strHtml+=" ";
	strHtml+=" ";
	strHtml+=" ";
	strHtml+=" ";
	strHtml+="下一页 ";
	strHtml+="末页      ";
	strHtml+="第"+curPage+"页 ";
	strHtml+="转页 ";
	strHtml+="GO ";
	strHtml+="共"+totalItemsNum+"条 ";
	strHtml+="共"+totalPages+"页 "
	targ.innerHTML=strHtml;
}

function SetLink()
{
	var  prepage=document.getElementById("pdv_prepage");
	var page1=document.getElementById("pdv_page1");
        var page2=document.getElementById("pdv_page2");
        var page3=document.getElementById("pdv_page3");
        var page4=document.getElementById("pdv_page4");
        var page5=document.getElementById("pdv_page5");
	
	var  nextpage=document.getElementById("pdv_nextpage");
	var  goto=document.getElementById("pdv_goto");
	var  targpage=document.getElementById("pdv_targpage");
	
	//上一页
	var pIndex=0;
	pIndex=curPage-1;
	if(pIndex<=0)
	{
		pIndex=totalPages;
	}
	prepage.href=searchString+pIndex;
	
	//下一页
	pIndex=parseInt(curPage)+1;
	if(pIndex>totalPages)
	{
		pIndex=1;
	}
	nextpage.href=searchString+pIndex;
	//跳转
	targpage.οnkeyup=function()        
	{
		if(isNaN(this.value))
		{
			goto.href="####";
		}
		else
		{
			if(this.value>=1&&this.value<=totalPages)
			{
				goto.href=searchString+this.value;
			}
		}
	};
	//中间5个翻页
	page1.style.display="none";
	page2.style.display="none";
	page3.style.display="none";//这一页始终指向当前页
	page4.style.display="none";
	page5.style.display="none";
	
	if(totalPages>0)
	{
		page3.style.display="";
		page3.style.textDecoration="underline";
		page3.innerHTML=curPage;
		page3.href=searchString+curPage;
		if(parseInt(curPage)+1<=totalPages)
		{
			ShowPageBtn(page4,parseInt(curPage)+1);
		}
		if(parseInt(curPage)+2<=totalPages)
		{
			ShowPageBtn(page5,parseInt(curPage)+2);
		}
		if(parseInt(curPage)-1>=1)
		{
			ShowPageBtn(page2,parseInt(curPage)-1);
		}
		if(parseInt(curPage)-2>=1)
		{
			ShowPageBtn(page1,parseInt(curPage)-2);
		}
	}
}

function ShowPageBtn(page,pIndex)
{
	page.style.display="";
	page.innerHTML=pIndex
	page.href=searchString+pIndex;
}

说明：js文件中通过id="PageDiv"的div元素的innerHTML属性的内容来获取页面文件传递过来当前页号、每页项目数、总项目数；

并通过修改其innerHTML属性内容来创建翻页链接

2.PageDivTest.asp文件内容（测试）

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>






<%
'当前页索引、每页项目条数、总项目数
Dim pageIndex,pageItemsNum,totalItemsNum
pageIndex=request.QueryString("pageIndex")
if pageIndex="" then
pageIndex=1
end if 
pageItemsNum=4
totalItemsNum=99
%>





<%=pageIndex%>
<%="|" %>
<%=pageItemsNum%>
<%="|" %>
<%=totalItemsNum%>
<%="|PageDivTest.asp?pageIndex="%>

说明：ASP文件中创建一个id=“PageDiv”的div元素：通过其innerHTML属性值来传递参数给js文件;其中pageIndex表示当前页号、pageItemsNum表示每页显示多少条目

totalItemsNum表示总的条目数、"PageDivTest.asp?pageIndex="即每个翻页及跳转链接url地址的前半部分

div中innerHTML中的内容格式为：1|4|99|PageDivTest.asp?pageIndex=

3、运行该测试ASP文件后的显示效果如图-1所示：

图-1

ASP测试文件中将pageItemsNum和totalItemsNum分别设成4和99，所以图-1会显示99条记录和25页

4、如图-1所示，点击各个翻页和GO链接可以实现模拟的翻页效果(这里省去了和数据库交互的内容)