最近通過自己的摸索，實現了一個簡單的網頁分頁顯示功能，現在分享給大家。有什麼不足和改進之處，歡迎大家留言一起討論，一起學習。

1.先來看看我們最終要實現的效果圖（下面以共11頁，7頁碼可見且隨點選動態變換）

2.CSS方面我就不詳細介紹了，在這裡主要說說js的主要實現邏輯和功能

（1）獲取頁碼顯示，返回最終需要顯示的程式碼拼接

/** 獲取頁碼顯示 */
function setPages(page,dbcount){<span style="font-family: Arial, Helvetica, sans-serif;">//page是目前需要顯示的頁碼，dbcount是頁碼總數</span>
	var aa = "";//要顯示的頁碼
	if(page>=4&&dbcount>=7){
		if(page>dbcount-3){
			for(var i=dbcount-6; i<=dbcount; i++){
				if(i==page) aa = aa+"<a href='javascript:void(0)' class='select'>"+page+"</a>";
				else aa = aa+"<a href='javascript:void(0)'>"+i+"</a>";
			}
		}
		else {
			for(var i=3; i>=-3 && page-i<=dbcount; i--){
				if(i==0) aa = aa+"<a href='javascript:void(0)' class='select'>"+page+"</a>";
				else aa = aa+"<a href='javascript:void(0)'>"+(page-i)+"</a>";
			}
		}
	}
	else if(page<4){
		for(var i=1; i<=7 && i<=dbcount; i++){
			if(page==i) aa = aa+"<a href='javascript:void(0)' class='select'>"+i+"</a>";
			else aa = aa+"<a href='javascript:void(0)'>"+i+"</a>";
		}
	}
	else if(dbcount<=7){
		aa = "<a href='javascript:void(0)'>1</a>…";
		for(var i=1; i<=dbcount; i++){
			if(page==i) aa = aa+"<a href='javascript:void(0)' class='select'>"+i+"</a>";
			else aa = aa+"<a href='javascript:void(0)'>"+i+"</a>";
		}
	}
	return aa;//返回最終需要顯示的頁碼拼接 
}
 

var aa = setPages(page,dbcount);//page是目前需要顯示的頁碼，dbcount是頁碼總數
aa = "<span style='cursor: pointer;' onclick='pageUp()'>《 </span>"
    +aa+"<span style='cursor: pointer;' onclick='pageDown()'>》 </span>";
$(".pages").html(aa);//pages顯示區域隨

//點選事件
$(".pages a").click(function(){
<span style="white-space:pre">	</span>if($(this).attr("class")!="page1"){
<span style="white-space:pre">		</span>$(".pages a").attr("class","");
<span style="white-space:pre">		</span>$(this).attr("class","select");
<span style="white-space:pre">		</span>//這裡加入資料呼叫的方法，賦值頁碼page
<span style="white-space:pre">	</span>}
});
 

/** 個人中心~已領取禮包~上一頁 */
function pageUp(){
	if($(".pages a.select").html()!="1"){
		var upPage = parseInt($(".pages a.select").html())-1;
		//這裡加入資料呼叫的方法，賦值頁碼upPage
	}
}
/** 個人中心~已領取禮包~下一頁 */
function pageDown(){
	if($(".pages a.select").html()!=$('.pages a:last').html()){
		var downPage = parseInt($(".pages a.select").html())+1;
		//這裡加入資料呼叫的方法，賦值頁碼downPage
	}
}