jQuery 封裝一個分頁插件 分頁如此簡單（附帶快捷查詢、首尾跳轉）

    分頁組件現在在網頁中的應用已經變得十分普遍，關於jquery實現分頁組件，網上有很多的框架可以用，不過既然是框架，使用的時候難免有些限制，

    所以本着學習新知識的態度，我就踏上了自己寫一個分頁組件的不歸路。網上的框架很少會有對源碼的解釋，所以我就準備來寫這篇blog，一方面讓一些跟我一樣的小白可以更加了解這個組件的實現，一方面讓自己可以從頭整理一遍實現這個組件的思路，畢竟一開始寫的時候亂糟糟的，如果寫着寫着能想到怎麼優化就更好了。

1：引入相關的js文件和樣式文件

<script src="js/jquery-1.9.1.min.js"></script>
  <link href="css/index.css" rel="stylesheet" />
  <!-- 注意：如果你直接複製所有代碼到本地，上述css路徑需要改成你本地的 -->

2：聲明一個div或者ul容器來存在分頁數據 

<ul class="page_box" style="margin-right: 600px;"> <!-- style="margin-right:20px;" -->

</ul>

3：加載分頁核心jQuery代碼文件，將這個代碼放在你html頁面即可

<script>
	//總頁數
	var pageNum = 1;
	//當前頁
	var currentPage = 1;
	//每頁多少條
	var size = 10;
	//方法名
	var fangfa = "";
	function rushPage(totalCount,ff){
		pageNum = totalCount;
		pageNum = totalCount <= size ? 1 : totalCount/size; 
		pageNum = parseInt(pageNum);
		if(totalCount >= size && totalCount%size != 0){
			pageNum += 1;
		}
		fangfa = ff;
		var topPage = "";
		if(pageNum >= 1 && pageNum <=4){
			for(j =1 ;j<=pageNum ;j++){
				if(j == currentPage){
					topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage("+j+")'>"+j+"</a>";
				}else{
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage("+j+")'>"+j+"</a>";
				}
			}
		}else if(pageNum >4){
				currentPage = parseInt(currentPage);
				var pre = currentPage-1;
				var next = currentPage+1;
				if(currentPage == 1){
					topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage(1)'>1</a><a class='' style='cursor:pointer;' onClick='selectPage(2)'>2</a><a class='' style='cursor:pointer;' onClick='selectPage(3)'>3</a><em>...</em><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else if(currentPage == pageNum){
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='' style='cursor:pointer;' onClick='selectPage("+(pageNum-2)+")'>"+(pageNum-2)+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(pageNum-1)+")'>"+(pageNum-1)+"</a><a class='active' style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else if((currentPage+1) == pageNum){
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else if((currentPage+2) == pageNum){
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+1)+")'>"+(currentPage+1)+"</a><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else{
					topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+1)+")'>"+(currentPage+1)+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+2)+")'>"+(currentPage+2)+"</a><em>...</em><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}
		}
		if(totalCount >= 1){
			$(".page_box").html("<li><a onclick='fristPage();' style='cursor:pointer;'>首頁</a><span><a onclick='upNextPage()' class='pre' style='cursor:pointer;'><i></i></a>"+topPage+"<a onclick='downNextPage();' class='next' style='cursor:pointer;'><i></i></a></span><a style='cursor:pointer;' onclick='lastPage();'>尾頁</a><span>跳轉到 第<input type='text' id='jumpPageNum' />頁 </span><a class='qd_btn' onclick='jumpPage();'>確定</a></li>");
		}else{
			$(".page_box").html("");
		}
	}
	function upNextPage(){
		currentPage = currentPage - 1;
		if(currentPage <= 0){
			currentPage = 1;
		}
		fangfa();
	}
	function downNextPage(){
		currentPage = currentPage + 1;
		if(currentPage > pageNum){
			currentPage = pageNum;
		}		
		fangfa();
	}
	function fristPage(){
		currentPage =  1;	
		fangfa();
	}
	function lastPage(){
		currentPage =  pageNum;	
		fangfa();
	}
	function selectPage(a){
		currentPage =  a;	
		fangfa();
	}
	function jumpPage(){
		var jumpPageNum = $("#jumpPageNum").val();
		if(jumpPageNum==""){
		jumpPageNum=1;
		};
		if(jumpPageNum>pageNum){
		jumpPageNum=pageNum;
		}
		currentPage = jumpPageNum;	
		fangfa();
	}	
	$(document).on("keyup","#jumpPageNum",function(){
	//$("#jumpPageNum").live("keyup",function(){
		var rg=$(this).val();
		if(rg != ""){
			rg = checkInputIsNumber(rg);
			if(rg != ""){
				rg = parseInt(rg);
				$(this).val(rg);
			}else{
				$(this).val(rg);
			}
		}
		if(rg > pageNum){
			$(this).val(pageNum);
		}
		currentPage = $("#jumpPageNum").val();
	});	
	
	/** 驗證只能輸入整數 數字* */
	function checkInputIsNumber (_this) {
	    var str = $.trim(_this).split('');
	    var valValue = "";
	    for (var i = 0; i < str.length; i++) {
	        if (!isNaN(str[i]) && $.trim(str[i]).length > 0) {
	            if (i == 0 && str[i] == 0) {
	            	
	            } else {
	                valValue += str[i];
	            }
	        }
	    }
	    return valValue;
	}					
</script>

4：如何調用代碼方法生成分頁 

<script>
	var currentPage = 1;  //默認初始分頁 請求數據時候會使用到這個變量傳入到你的後臺查詢第幾頁的數據
	$(document).ready(function(){
		get_Date();
	})
	function get_Date(){
		var total = 50; //這個就是你的數據總數
		alert(currentPage);
		if(total >10){
		  rushPage(50, get_Date); //get_Date 是你請求數據的方法
		}else{
		  rushPage(0, get_Date);
		}
	}
</script>

下面是效果圖

總結特點如下：

A. 方便在 JavaScript 中對後端分頁數據進行展示

B. 自動生成分頁組件，包括首頁、頁碼、末頁、頁碼切換、跳頁、輸入頁碼快捷跳轉

C. 可根據 "class" 或 "id" 作爲指定容器，通過 "class" 可以實現多個分頁組件同時生成

 最後附上一個完整的代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>分頁插件</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="js/jquery-1.9.1.min.js"></script>
  <link href="css/index.css" rel="stylesheet" />
  <!-- 注意：如果你直接複製所有代碼到本地，上述css路徑需要改成你本地的 -->
</head>
<script>
	//總頁數
	var pageNum = 1;
	//當前頁
	var currentPage = 1;
	//每頁多少條
	var size = 10;
	//方法名
	var fangfa = "";
	function rushPage(totalCount,ff){
		pageNum = totalCount;
		pageNum = totalCount <= size ? 1 : totalCount/size; 
		pageNum = parseInt(pageNum);
		if(totalCount >= size && totalCount%size != 0){
			pageNum += 1;
		}
		fangfa = ff;
		var topPage = "";
		if(pageNum >= 1 && pageNum <=4){
			for(j =1 ;j<=pageNum ;j++){
				if(j == currentPage){
					topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage("+j+")'>"+j+"</a>";
				}else{
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage("+j+")'>"+j+"</a>";
				}
			}
		}else if(pageNum >4){
				currentPage = parseInt(currentPage);
				var pre = currentPage-1;
				var next = currentPage+1;
				if(currentPage == 1){
					topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage(1)'>1</a><a class='' style='cursor:pointer;' onClick='selectPage(2)'>2</a><a class='' style='cursor:pointer;' onClick='selectPage(3)'>3</a><em>...</em><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else if(currentPage == pageNum){
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='' style='cursor:pointer;' onClick='selectPage("+(pageNum-2)+")'>"+(pageNum-2)+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(pageNum-1)+")'>"+(pageNum-1)+"</a><a class='active' style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else if((currentPage+1) == pageNum){
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else if((currentPage+2) == pageNum){
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+1)+")'>"+(currentPage+1)+"</a><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else{
					topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+1)+")'>"+(currentPage+1)+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+2)+")'>"+(currentPage+2)+"</a><em>...</em><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}
		}
		if(totalCount >= 1){
			$(".page_box").html("<li><a onclick='fristPage();' style='cursor:pointer;'>首頁</a><span><a onclick='upNextPage()' class='pre' style='cursor:pointer;'><i></i></a>"+topPage+"<a onclick='downNextPage();' class='next' style='cursor:pointer;'><i></i></a></span><a style='cursor:pointer;' onclick='lastPage();'>尾頁</a><span>跳轉到 第<input type='text' id='jumpPageNum' />頁 </span><a class='qd_btn' onclick='jumpPage();'>確定</a></li>");
		}else{
			$(".page_box").html("");
		}
	}
	function upNextPage(){
		currentPage = currentPage - 1;
		if(currentPage <= 0){
			currentPage = 1;
		}
		fangfa();
	}
	function downNextPage(){
		currentPage = currentPage + 1;
		if(currentPage > pageNum){
			currentPage = pageNum;
		}		
		fangfa();
	}
	function fristPage(){
		currentPage =  1;	
		fangfa();
	}
	function lastPage(){
		currentPage =  pageNum;	
		fangfa();
	}
	function selectPage(a){
		currentPage =  a;	
		fangfa();
	}
	function jumpPage(){
		var jumpPageNum = $("#jumpPageNum").val();
		if(jumpPageNum==""){
		jumpPageNum=1;
		};
		if(jumpPageNum>pageNum){
		jumpPageNum=pageNum;
		}
		currentPage = jumpPageNum;	
		fangfa();
	}	
	$(document).on("keyup","#jumpPageNum",function(){
	//$("#jumpPageNum").live("keyup",function(){
		var rg=$(this).val();
		if(rg != ""){
			rg = checkInputIsNumber(rg);
			if(rg != ""){
				rg = parseInt(rg);
				$(this).val(rg);
			}else{
				$(this).val(rg);
			}
		}
		if(rg > pageNum){
			$(this).val(pageNum);
		}
		currentPage = $("#jumpPageNum").val();
	});	
	
	/** 驗證只能輸入整數 數字* */
	function checkInputIsNumber (_this) {
	    var str = $.trim(_this).split('');
	    var valValue = "";
	    for (var i = 0; i < str.length; i++) {
	        if (!isNaN(str[i]) && $.trim(str[i]).length > 0) {
	            if (i == 0 && str[i] == 0) {
	            	
	            } else {
	                valValue += str[i];
	            }
	        }
	    }
	    return valValue;
	}					
</script>
<script>
	var currentPage = 1; //默認初始分頁 請求數據時候會使用到這個變量傳入到你的後臺查詢第幾頁的數據
	$(document).ready(function(){
		get_Date();
	})
	function get_Date(){
		var total = 50; //這個就是你的數據總數
		alert(currentPage);
		if(total >10){
		  rushPage(50, get_Date); //get_Date 是你請求數據的方法
		}else{
		  rushPage(0, get_Date);
		}
	}
</script>
<ul class="page_box" style="margin-right: 600px;"> <!-- style="margin-right:20px;" -->

</ul>
<body>
</body>
</html>