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 ο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：如何调用代码方法生成分页 

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