JS生成翻页链接

最新推荐文章于 2017-12-18 16:48:23 发布

xyd_linux

最新推荐文章于 2017-12-18 16:48:23 发布

阅读量699

点赞数

分类专栏： JavaScript 文章标签： javascript border xhtml class html c

本文链接：https://blog.csdn.net/xyd_linux/article/details/7727436

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>翻页</title>
<style>
	.datapager{height:35px;padding-top:15px;background-color:#EAEAEA;border:1px solid #F9F9F9;border-width:0 1px;FONT-FAMILY: Tahoma,Helvetica,sans-serif; text-align:right;}
	.datapager a { border:1px solid #CCDBE4; padding:2px 8px; margin-right:3px; text-decoration:none;BACKGROUND-POSITION: 50% bottom;}
	.datapager a:hover { border:1px solid #2b55af; color:#FFF; background-color:#3666D4; BACKGROUND-IMAGE: none;}
	.datapager a:active { border:1px solid #2b55af; color:#FFF; background-color:#3666D4;BACKGROUND-IMAGE: none;}
	.datapager span.current { padding:2px 6px; font-weight:bold; color:#000; margin-right:3px;}
	.datapager span.disabled { display:none;}
</style>
<script>
function createPagerLink(c,t){
	//c-当前页,t-总页,h-翻页HTML,b-链接第一页,e-链接最后页
	var h = "", b = 1, e = t;	
	if(t > 10){
		if(c > t - 9){b = t - 9;if(b > c - 4){b = c - 4 > 0 ? c - 4 : 1;}}else if(c - 4 > 1){b = c - 4;}
		if(c < 5){e = 10;}else if(c + 5 < t){e = c + 5;}
	}
	if(b > 1){h += '<a href="javascript:;" οnclick="pageJumpTo(1);">1</a>'}
	if(b > 2){h += '... ';}
	for(var i = b; i <= e; i++){
		if(i == c){
			h += '<span class="current">'+ i +'</span>';
			continue;
		}
		h += '<a href="javascript:;" οnclick="pageJumpTo('+ i +');">'+ i +'</a>';
	}
	if(e != t){
		if(e + 1 != t){
			h += '... ';
		}
		h += '<a href="javascript:;" οnclick="pageJumpTo('+ t +');">'+ t +'</a>';
	}
	return h
}
var tt = 19;
for(var i = 1;i<=tt;i++){
	document.write("<div class='datapager'>"+createPagerLink(i,tt)+"</div><br/>");
}
</script>
</head>

<body>
</body>
</html>

xyd_linux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS生成翻页链接

翻页 .datapager{height:35px;padding-top:15px;background-color:#EAEAEA;border:1px solid #F9F9F9;border-width:0 1px;FONT-FAMILY: Tahoma,Helvetica,sans-serif; text-align:right;} .datapager a { border
复制链接

扫一扫