一段异步无刷新的分页代码

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>js分页</title>

<style type="text/css">

div,ul,li,body { margin: 0; padding: 0; font-size: 12px; }

#containet {

	display: inline-block;

	border: 1px solid #e1dede;

	padding: 19px;

	margin: auto;

}

#pageMain li {

	list-style: none;

	line-height: 22px;

}

#pageBox { padding: 10px 0 0 0; }

#pageBox span {

	display: inline-block;

	width: 60px;

	height: 24px;

	line-height: 24px;

	text-align: center;

	color: #fff;

	background: #08a586;

}

#pageNav { display: inline-block; }

#pageNav a {

	display: inline-block;

	width: 24px;

	height: 24px;

	line-height: 24px;

	text-align: center;

	color: #08a586;

	text-decoration:none;

}

#pageNav a.active,

#pageNav a:hover {

	background: #08a586;

	color: #fff;

}

</style>

</head>



<body>

<div id="containet">

	<ul id="pageMain">

    	<li>这是内容标题 第1条</li>

        <li>这是内容标题 第2条</li>

        <li>这是内容标题 第3条</li>

        <li>这是内容标题 第4条</li>

        <li>这是内容标题 第5条</li>

        <li>这是内容标题 第6条</li>

        <li>这是内容标题 第7条</li>

        <li>这是内容标题 第8条</li>

        <li>这是内容标题 第9条</li>

        <li>这是内容标题 第10条</li>

        <li>这是内容标题 第11条</li>

        <li>这是内容标题 第12条</li>

        <li>这是内容标题 第13条</li>

        <li>这是内容标题 第14条</li>

        <li>这是内容标题 第15条</li>

        <li>这是内容标题 第16条</li>

        <li>这是内容标题 第17条</li>

        <li>这是内容标题 第18条</li>

        <li>这是内容标题 第19条</li>

        <li>这是内容标题 第20条</li>

        <li>这是内容标题 第21条</li>

        <li>这是内容标题 第22条</li>

        <li>这是内容标题 第23条</li>

        <li>这是内容标题 第24条</li>

        <li>这是内容标题 第25条</li>

        <li>这是内容标题 第26条</li>

        <li>这是内容标题 第27条</li>

        <li>这是内容标题 第28条</li>

        <li>这是内容标题 第29条</li>

        <li>这是内容标题 第30条</li>

    </ul>

    <div id="pageBox">

    	<span id="prev">上一页</span>

        <ul id="pageNav">

        </ul>

        <span id="next">下一页</span>

    </div>

</div>

</body>

</html>

<script>

window.onload = function(){

	

	tabPage({

		pageMain : 'pageMain',

		pageNav : 'pageNav',

		pagePrev: 'prev',

		pageNext: 'next',

		curNum: 7,      //每页显示的条数

		activeClass: 'active',   //高光显示的class

		ini: 0    //初始化显示的页面

	});

	

	function tabPage(tabPage){

		var pageMain = document.getElementById(tabPage.pageMain);   //获取内容列表

		var pageNav = document.getElementById(tabPage.pageNav);     //获取分页

		var pagePrev = document.getElementById(tabPage.pagePrev);   //上一页

		var pageNext = document.getElementById(tabPage.pageNext);   //下一页

		

		var curNum = tabPage.curNum;                                //每页显示数

		var len = Math.ceil(pageMain.children.length / curNum);     //计算总页数

		var pageList = '';                                          //生成页码

		var iNum = 0;                                               //当前的索引值index

		

		for(var i = 0; i < len; i++){

			pageList+='<a href="javascript:;">'+ ( i + 1)+'</a>';

		}

		pageNav.innerHTML = pageList;

		

		pageNav.children[0].className = tabPage.activeClass;        //头一页加高亮显示

		

		for(var i = 0; i < pageNav.children.length; i++){

			pageNav.children[i].index = i;

			pageNav.children[i].onclick = function(){

				for(var t = 0; t < pageNav.children.length; t++){

					pageNav.children[t].className = '';

				}

				this.className = tabPage.activeClass;

				iNum = this.index;

				ini(iNum);

			};

		}

		

		

		//下一页

		pageNext.onclick = function(){

			if(iNum == len - 1){

				alert('已经是最后一页');

				return false;

			}else{

				for(var t = 0; t < pageNav.children.length; t++){

					pageNav.children[t].className = '';

				}

				iNum++;

				pageNav.children[iNum].className = tabPage.activeClass;

				ini(iNum);

			}

		};

		

		//上一页

		pagePrev.onclick = function(){

			if(iNum == 0){

				alert('当前是第一页');

				return false;

			}else{

				for(var t = 0; t < pageNav.children.length; t++){

					pageNav.children[t].className = '';

				}

				iNum--;

				pageNav.children[iNum].className = tabPage.activeClass;

				ini(iNum);

			}

		};

		

		function ini(iNum){

			for(var i = 0; i < pageMain.children.length; i++){

				pageMain.children[i].style.display = 'none';

			}

			

			for(var i = 0; i < curNum; i++){

				if(pageMain.children[(iNum * curNum + i)] == undefined){ continue; }

				pageMain.children[(iNum * curNum + i)].style.display = 'block';

			}

		}

		

		ini(iNum);

		

	}

};

</script>

  

你可能感兴趣的:(分页)