jQuery分页插件分享

本人菜鸟一枚，第一次编写博客，当然也是第一次技术分享，只保证代码确实可行，不保证代码质量，还请见谅。后续会持续更新版本，敬请期待

//version 0.0.1
(function($){
	$.fn.extend({
		paging: function(option){//option为用户自定义参数值最终会通过$.extend覆盖defaults中的值
			var $obj = $(this);//调用方法的父类
			var defaults = {
				currentPage: 1, //当前页面
            	pageCount:10 //数据总页码
        	};
        	var settings = $.extend(defaults, option || {});  //初始化
        	var currentPage = settings.currentPage;//设置当前页面
        	var pageCount = settings.pageCount;//设置总页数
        	init();//运行初始化函数
        	function init(){
        		$obj.html('');
        		if(pageCount <= 6){
        			standlt();
        		}else{
        			standgt();
        		}
        	}
        	//standlt start  改函数为小于某一数值时的情况  此处定义的是6  如果想使插件更灵活，可以将其定义在defaults中
        	function standlt(){
        		var prevPage = '<label class="bold prevPage"><<</label>';//上一页
        		var nextPage = '<label class="bold nextPage">>></label>';//下一页
        		var html;//声明变量，最后遍历页码
        		if(pageCount <= 1){//当总页码数等于1时隐藏分页
        			$obj.hide();
        		}else if(pageCount == 2){//等于2时需要判断当前页
        			if(currentPage == 1){
        				html = '<span>1</span><span>2</span>' + nextPage;
        				$obj.append(html);
        				changeBackground(0);
        				return;
        			}else{
        				html = prevPage + '<span>1</span><span>2</span>';
        				$obj.append(html);
        				changeBackground(1);
        				return;
        			}
        		}else if(pageCount >= 3 && pageCount <= 6){//当总页码数在3和6之间的情况
        			if(currentPage != 1){
        				html = prevPage;
        			}else{
        				html = '';
        			}       			
        			for(var i = 1; i <= pageCount; i++){
        				html += '<span>' + i + '</span>';
        			}
        			if(currentPage != pageCount){
        				html += nextPage;
        			}else{
        				html = html;
        			}       			
        			$obj.append(html);
        			changeBackground(currentPage -1);
        			return;
        		}
        		
        	}

        	//总页码数大于6的情况
        	function standgt(){
        		/*1.当页面数比较多，得有首页和末页选项，如果当前页小于等于3，首页标签隐藏，
				**如果当前页+2大于等于pageCount,末页标签隐藏。
				**2.当前页一直保持在最中间。
        		*/
        		var startPage = '<label class="startPage">start</label>';//首页
        		var endPage = '<label class="endPage">end</label>';//末页
        		var prevPage = '<label class="bold prevPage"><<</label>';//上一页
        		var nextPage = '<label class="bold nextPage">>></label>';//下一页
        		var html;//声明变量，最后遍历页码
        		if(currentPage >= 1 && currentPage <= 3){
        			if(currentPage > 1){
        				html = prevPage;
        			}else{
        				html = '';
        			}
        			for(var i = 1; i <= 5; i++){
        				html += '<span>' + i + '</span>';
        			}
        			html += nextPage + endPage;
        			$obj.append(html);
        			changeBackground(currentPage - 1);
        			return;
        		}else if(currentPage >= pageCount - 2 && currentPage <= pageCount){
        			html = startPage + prevPage;
        			for(var i = pageCount - 4; i <= pageCount; i++){
        				html += '<span>' + i + '</span>';
        			}
        			if(currentPage != pageCount){
        				html += nextPage;
        			}else{
        				html = html;
        			}        			
        			$obj.append(html);
        			$obj.find('span').each(function(index, value){
     					if(value.innerHTML == currentPage){
     						changeBackground(index);
     					}
        			})        			
        			return;
        		}else if(currentPage > 3 && currentPage < pageCount - 2){
        			html = startPage + prevPage;
        			for(var i = currentPage - 2; i <= currentPage + 2; i++){
        				html += '<span>' + i + '</span>';
        			}
        			html += nextPage + endPage;
        			$obj.append(html);
        			changeBackground(2);
        			return;
        		}


        	}

        	function changeBackground(currentPage){
        		var obj_span = $obj.find('span');
        		obj_span.removeClass('currentBackground').eq(currentPage).addClass('currentBackground');
        	}
        	$obj.on('click','.prevPage',function(){
        		--currentPage;
        		init();      		
        	});
        	$obj.on('click','.nextPage',function(){
        		++currentPage;
        		init();       		
        	})
        	//点击首页将currentPage置为1
        	$obj.on('click','.startPage',function(){
        		currentPage = 1;
        		init();       		
        	})
        	//点击首页将currentPage置为pageCount
        	$obj.on('click','.endPage',function(){
        		currentPage = pageCount;
        		init();       		
        	})
        	$obj.on('click','span',function(){
				var current = $(this).html();
				currentPage = parseInt(current);
				init();				
			});
		}
	})
})(jQuery);

在调用该插件之前请先引入jQuery文件，调用方法如下

html代码

<div id="pagination"></div>

jquery代码

$('#pagination').paging();//一行代码就搞定，就是这么easy

当然也可以自己配置，例如当前页面为第8页，总页数有10页调用方法如下

$('#pagination').paging({'currentPage':8,'pageCount':10});

到这里  over ！