js分页脚本代码入门实例

最新推荐文章于 2022-07-14 17:39:57 发布

my_baby_2009

最新推荐文章于 2022-07-14 17:39:57 发布

阅读量1.3k

点赞数

分类专栏： Javascript相关

Javascript相关专栏收录该内容

99 篇文章 0 订阅

订阅专栏

本文介绍了js实现的 js分页脚本代码，一个简单的分页效果入门实例，分享给朋友们。

例子，js实现的分页脚本，与其它编程语言的分页原理是一样的，不过这里是js实现的，可以学习借鉴下。

<%@ Page Language="C#" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<script runat="server"> 
</script> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>js分页脚本代码-www.jbxue.com</title> 
<script language="javascript" type="text/javascript" > 
function showpage(url,num,c_p) 
{ 
var prev=0;var next=0;var temp=0;var html=""; 
if(parseInt(c_p+3)>num) 
{ 
prev=num; 
} 
else 
{ 
prev=parseInt(c_p+3); 
} 
temp=10-(prev-c_p); 
if(c_p-temp>0) 
{ 
next=c_p-temp; 
} 
else 
{ 
next=1; 
} 
//如果显示的第一页<10，总页数又大于10 
if(c_p+3<10&&num>c_p+3) 
{ 
for(j=1;j<=10-(c_p+3);j++) 
{ 
prev++; 
} 
} 
if(c_p!=num) 
{ 
html+="<a href='"+url+"index="+(1+c_p)+"'>上一页</a>"+" "; 
} 
for (i=prev;i>=next;i--) 
{ 
if (i==c_p) 
{ 
html+="<font color=red>"+i+" </font>"; 
} 
else 
{ 
html+="<a href='"+url+"index="+i+"'>"+i+"</a>"+" "; 
} 
} 
if(c_p!=1) 
{ 
html+="<a href='"+url+"index="+(c_p-1)+"'>下一页</a>"+" "; 
} 
document.getElementById("pagenumber").innerHTML=html+" 转到<input id=\"page\" style=\"width: 33px\" />页 <input type=\"button\" value=\"go\" οnclick=\"funcGo()\" />"; 
} 
function funcLoad() 
{ 
var num=100; 
var url="testpager.html?"; 
var index ; 
index = getUrlParam("index"); 
if(index==0) 
{ 
index=num; 
} 
showpage(url,num,index); 
} 
function getUrlParam(name) 
{ 
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
var r = window.location.search.substr(1).match(reg); 
if (r!=null) 
{ 
return parseInt(unescape(r[2])); 
} 
return 0; 
} 
function funcGo() 
{ 
var num=100; 
if(parseInt(document.getElementById("page").value)>0&&parseInt(document.getElementById("page").value)<=num) 
{ www.jbxue.com
window.location.href="testpager.html?index="+parseInt(document.getElementById("page").value); 
} 
else 
{ 
alert("页码不存在！"); 
return false; 
} 
} 
</script> 
</head> 
<body οnlοad="funcLoad(0)"> 
<form id="form1" runat="server"> 
<div id="pagenumber"> 
</div> 
</form> 
</body> 
</html>

您可能感兴趣的文章：

my_baby_2009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js分页脚本代码入门实例

本文介绍了js实现的js分页脚本代码，一个简单的分页效果入门实例，分享给朋友们。例子，js实现的分页脚本，与其它编程语言的分页原理是一样的，不过这里是js实现的，可以学习借鉴下。您可能感兴趣的文章：js对文章内容进行分页实现代码javascript分页代码 js分页示例代码javascript实现带省略号的分页效果
复制链接

扫一扫

专栏目录