jQuery plugin package a pagination pagination so simple (with quick and easy, and last jump)

    Paging component is now used in a Web page has become very widespread, about jquery to achieve paging component, there are many online framework can be used, but since it is a frame, when used inevitable that some limitations,

    Therefore, in line with the attitude of learning new knowledge, I embarked on their own to write a paging component of no return. Online framework rarely interpretation of the source, so I prepared to write this blog, on the one hand so that some white like me can achieve a better understanding of this component, on the one hand so that they can organize it again from scratch to achieve this ideas components, after all, the beginning of the writing of the mess, if read, read, can think of how to optimize the better.

1: the introduction of related files and style file js

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

2: Declare a div or ul container there is paged data 

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

</ul>

3: Load paged core jQuery code file, this code in your html page to

<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 οnclick='fristPage();' style='cursor:pointer;'>首页</a><span><a οnclick='upNextPage()' class='pre' style='cursor:pointer;'><i></i></a>"+topPage+"<a οnclick='downNextPage();' class='next' style='cursor:pointer;'><i></i></a></span><a style='cursor:pointer;' οnclick='lastPage();'>尾页</a><span>跳转到 第<input type='text' id='jumpPageNum' />页 </span><a class='qd_btn' οnclick='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: How the calling code generation method pagination 

<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>

The following are results of FIG.

Summarizes the features are as follows:

A. facilitate display of back-end data pages in JavaScript

B. Automatic generation tab assembly, including home, page, last page, the page switching, jump pages, enter the page jump fast

C. According to "class" or "id" as a designated container, through the "class" may simultaneously achieve a plurality of paging component generated

 Finally, attach a complete code

<!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 οnclick='fristPage();' style='cursor:pointer;'>首页</a><span><a οnclick='upNextPage()' class='pre' style='cursor:pointer;'><i></i></a>"+topPage+"<a οnclick='downNextPage();' class='next' style='cursor:pointer;'><i></i></a></span><a style='cursor:pointer;' οnclick='lastPage();'>尾页</a><span>跳转到 第<input type='text' id='jumpPageNum' />页 </span><a class='qd_btn' οnclick='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>