javascript实现简单的分页特效
下面是一段javascript实现的分页代码，当然必须要结合后台代码实现。大家可以自行分析一下代码，希望能够给大家带来一定的帮助,代码如下:
<scripttype="text/javascript">
functionsetPage(opt)
{
if(!opt.pageDivId||opt.allPageNum<opt.curpageNum||opt.allPageNum<opt.showPageNum)
{
returnfalse
}
varallPageNum=opt.allPageNum;//总的页数
varshowPageNum=opt.showPageNum;//显示的页数
varcurpageNum=opt.curpageNum;//当前的页数
varpageDIvBox=document.getElementById(opt.pageDivId);
//左边或右边显示页码的个数
varlrNum=Math.floor(showPageNum/2);
if(curpageNum>1)
{
varoA=document.createElement('a');
oA.href='#1';
oA.innerHTML='首页'
pageDIvBox.appendChild(oA);
}
if(curpageNum>1)
{
varoA=document.createElement('a');
oA.href='#'+(curpageNum-1);
oA.innerHTML='上一页'
pageDIvBox.appendChild(oA);
}
if(curpageNum<showPageNum-2||allPageNum==showPageNum)
{
for(vari=1;i<=showPageNum;i++)
{
varoA=document.createElement('a');
oA.href='#'+i;
if(curpageNum==i)
{
oA.innerHTML=i;
}
else
{
oA.innerHTML="["+i+"]";
}
pageDIvBox.appendChild(oA);
}
}
else
{
//倒数第一页的处理
if(allPageNum-curpageNum<lrNum&&curpageNum==allPageNum-1)
{
for(vari=1;i<=showPageNum;i++)
{
console.log((curpageNum-showPageNum+i));
varoA=document.createElement('a');
oA.href='#'+(curpageNum-(showPageNum-1)+i);
if(curpageNum==(curpageNum-(showPageNum-1)+i))
{
oA.innerHTML=(curpageNum-(showPageNum-1)+i)
}
else
{
oA.innerHTML='['+(curpageNum-(showPageNum-1)+i)+']'
}
pageDIvBox.appendChild(oA);
}
}
//最后一页的处理
elseif(allPageNum-curpageNum<lrNum&&curpageNum==allPageNum)
{
for(vari=1;i<=showPageNum;i++)
{
console.log((curpageNum-showPageNum+i));
varoA=document.createElement('a');
oA.href='#'+(curpageNum-showPageNum+i);
if(curpageNum==(curpageNum-showPageNum+i))
{
oA.innerHTML=(curpageNum-showPageNum+i)
}
else
{
oA.innerHTML='['+(curpageNum-showPageNum+i)+']'
}
pageDIvBox.appendChild(oA);
}
}
else
{
for(vari=1;i<=showPageNum;i++)
{
varoA=document.createElement('a');
oA.href='#'+(curpageNum-(showPageNum-lrNum)+i);
if(curpageNum==(curpageNum-(showPageNum-lrNum)+i))
{
oA.innerHTML=(curpageNum-(showPageNum-lrNum)+i)
}
else
{
oA.innerHTML='['+(curpageNum-(showPageNum-lrNum)+i)+']'
}
pageDIvBox.appendChild(oA);
}
}
}
if(curpageNum<allPageNum)
{
for(vari=1;i<=2;i++)
{
if(i==1)
{
varoA=document.createElement('a');
oA.href='#'+(parseInt(curpageNum)+1);
oA.innerHTML='下一页'
}
else
{
varoA=document.createElement('a');
oA.href='#'+allPageNum;
oA.innerHTML='尾页'
}
pageDIvBox.appendChild(oA);
}
}
varoA=document.getElementsByTagName('a');
//给页码添加点击事件
for(vari=0;i<oA.length;i++)
{
oA[i].onclick=function(){
//当前点的页码
varsHref=this.getAttribute('href').substring(1);
//清空页数显示
pageDIvBox.innerHTML='';
setPage({
pageDivId:'page',
showPageNum:5,//显示的个数
allPageNum:10,//总页数
curpageNum:sHref//当前页数
})
}
}
}
window.onload=function()
{
setPage({
pageDivId:'page',
showPageNum:5,//显示的个数
allPageNum:10,//总页数
curpageNum:1//当前页数
})
}
</script>
示例二：
<html>
<head>
<styletype="text/css">
body{
font-size:12px;
}
</style>
</head>
<body>
<inputtype="button"value="分页"onclick="initializePageNav(1)">
<divid="pageDir"></div>
<scriptlanguage="JavaScript">
<!--
functioninitializePageNav(iCurrPage)
{
variPageSize=20;
variProCount=2121;
varb=((iProCount%iPageSize)!=0);
variPageCount=parseInt(iProCount/iPageSize)+(b?1:0);
if(iCurrPage>iPageCount)returnfalse;
iCurrPage=parseInt(iCurrPage);
varsTemp="";
varsTemp1="每页:"+iPageSize+"/<spanstyle='color:red'>"+iProCount+"</span>条页数:<spanstyle='color:blue'>"+iCurrPage+"</span>/"+iPageCount+"页";
varsTemp2="<inputtype=\"text\"id=\"goPageNo\"value=\""+iCurrPage+"\"size=\"3\"/><inputtype=\"button\"value=\"GO\"onclick=\"initializePageNav($('goPageNo').value);\"/>"
if(iProCount==0)
{
sTemp="<fontcolor='#cccccc'>首页上一页下一页末页</font>";
}
elseif(iPageCount==1)
{
sTemp="<fontcolor='#cccccc'>首页上一页下一页末页</font>"
}
elseif(iPageCount==iCurrPage)
{
sTemp="<ahref='Javascript:initializePageNav(1)'>首页</a><ahref='Javascript:initializePageNav("+(iPageCount-1)+")'>上一页</a><fontcolor='#cccccc'>下一页末页</font>"
}
elseif(iCurrPage==1)
{
sTemp="<fontcolor='#cccccc'>首页上一页</font><ahref='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a><ahref='Javascript:initializePageNav("+iPageCount+")'>末页</a>"
}
else
{
sTemp="<ahref='Javascript:initializePageNav(1)'>首页</a><ahref='Javascript:initializePageNav("+(iCurrPage-1)+")'>上一页</a><ahref='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a><ahref='Javascript:initializePageNav("+(iPageCount)+")'>末页</a>"
}
$("pageDir").innerHTML=sTemp+""+sTemp2+""+sTemp1;
CollectGarbage();
}
function$(o)
{
returndocument.getElementById(o);
}
initializePageNav(1)
//-->
</script>
</body>
</html>
示例三：
实现的效果是：上一页、第一页、…（上n个页码）、n个页码、…（下n个页码）、最后一页、下一页。n可以是奇数也可以是偶数，一般都喜欢取奇数
//总页数，当前页数，跳转地址，第一页和最后一页之间显示的页码数量
functionpageBar(tp,cp,url,pn){
varstr=‘<ulclass=”page”>';
if(tp>1&&cp>1){
varprev=cp-1;
str+=‘<li><aclass=”prev”title=”上一页”href=”javascript:goPage(‘+prev+‘,\”+url+‘\');”><span>上一页</span></a></li>‘;
}else{
str+=‘<li><aclass=”prev”title=”上一页”href=”javascript:void(0);”><span>上一页</span></a></li>‘;
}
if(tp>1){
//第一页
if(cp==1){
str+=‘<liclass=”current”><ahref=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li>‘;
}else{
str+=‘<li><ahref=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li>‘;
}
if(tp>2){
varpnh=Math.floor(pn/2);
//循环开始页码
vars=cp-pnh;
if(s<=1){
s=2;
}
//循环结束页码
vare=cp+pnh;
if(e>=tp){
e=tp-1;
}
if(s<=(1+pnh)){
if(tp>(pn+2)){
e=s+(pn-1);
if(e>=tp){
e=tp-1;
}
}else{
s=2;
}
}
if(e>=(tp-pnh)){
if(tp>(pn+2)){
s=e-(pn-1);
if(s<=1){
s=2;
}
}else{
e=tp-1;
}
}
if(e<s){
e=s;
}
//第一页后的多页跳转
if(s>2){
varsp=cp-pn;
if(sp<1){
sp=1;
}
str+=‘<li><aname=”break”href=”javascript:goPage(‘+sp+‘,\”+url+‘\');”><span>…</span></a></li>‘;
}
for(vari=s;i<=e;i++){
if(i==cp){
str+=‘<liclass=”current”><ahref=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li>‘;
}else{
str+=‘<li><ahref=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li>‘;
}
}
//最后一页前的多页跳转
if(e<(tp-1)){
varep=cp+pn;
if(ep>tp){
ep=tp;
}
str+=‘<li><aname=”break”href=”javascript:goPage(‘+ep+‘,\”+url+‘\');”><span>…</span></a></li>‘;
}
}
//最后一页
if(cp==tp){
str+=‘<liclass=”current”><ahref=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li>‘;
}else{
str+=‘<li><ahref=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li>‘;
}
}else{
str+=‘<liclass=”current”><ahref=”javascript:void(0);”><span>1</span></a></li>‘;
}
if(tp>1&&cp<tp){
varnext=cp+1;
str+=‘<li><aclass=”next”title=”下一页”href=”javascript:goPage(‘+next+‘,\”+url+‘\');”><span>下一页</span></a></li>';
}else{
str+=‘<li><aclass=”next”title=”下一页”href=”javascript:void(0);”><span>下一页</span></a></li>';
}
str+=‘</ul>';
returnstr;
}
//跳转页码，跳转地址
functiongoPage(cp,url){
window.location.href=url+cp;
}