jquery插件--簡單的分頁插件

jquery插件開發--簡單的分頁插件

         jquery提供很方法的js插件開發函數，關於jquery插件的開發教程，可以參考博主的上一篇博文《jQuery插件開發精品教程》，這裏就不再重複。

         由於項目中經常會使用到分頁顯示列表數據，這裏就會用到關於一組分頁按鈕，之前的分頁按鈕是通過jsp的自定義標籤來實現的一組分頁按鈕，關於jsp的自定義標籤流程，可以參考《週記（jsp自定義標籤）》。接觸了jquery插件開發後，覺的js插件，不管是使用還是管理，或者是二次開發，都比jsp的自定義標籤使用起來方便，這裏就通過js的插件形勢編寫分頁按鈕組。

具體js插件代碼如下：

;(function($,window,document,undefined){
	//自定義對象構造器
	var SimplePaging = function(ele,opt){
		this.$element = ele;
		this.defaults = {
			'test':"aaa",
			//必須參數
			'cPage':1,  //當前頁碼
			'tPage':1,  //總頁數
			'clickFun':null,  //點擊調用的函數名
			//可選參數
			'space':10,  //頁面間距
			'showLast':true,  //是否顯示第一頁和最後頁按鈕組       true爲顯示
			'showNext':true,  //是否顯示下一頁和上一頁按鈕組	 true爲顯示
			'div':{
				'float':'right',
				'font-size':'14px',				
				'-moz-user-select': 'none',
				'-webkit-user-select':'none',
				'-ms-user-select':'none',
				'-khtml-user-select':'none',
				'user-select':'none'
			},
			'btn':{
				'display':'inline-block',
				'position': 'relative',
				'padding':'0 5px',
				'letter-spacing':'0px',
				'cursor':'pointer',
			},
			'btnOver':{
				'top':'-1px',
			},
			'btnOut':{
				'top':'0px',
			},
			'btnAction':{
				'display':'inline-block',
				'position': 'relative',
				'padding':'0 5px',
				'letter-spacing':'0px',
				'color':'#EA8010',				
			    'top':'-1px',
			    'cursor':'default',
			},
		};
		this.options = $.extend({},this.defaults,opt);
	};
	
	//自定義對象方法
	SimplePaging.prototype = {
		test:function(){
			this.$element.html(this.options.test);
			return this.$element;
		},
		writePageBtn:function(){   //   1  10  20  30 31 32 33 34 35 36 37 38 39 40 50 60 ...
			var cPage = this.options.cPage;
			var tPage = this.options.tPage;
			var space = this.options.space;
			var funName = this.options.clickFun;
			var c = Math.ceil(cPage/space);
			//var l = Math.ceil(tPage/space);
			var id = this.$element.prop("id");
			var pageDiv = '';
			//第一頁
			if(this.options.showLast){
				pageDiv = pageDiv + '<span class="pageSpan_'+id+'" οnclick="'+funName+'(1)">|<</span>';
			}
			//上一頁
			if(this.options.showNext){
				if(cPage>1){
					pageDiv = pageDiv + '<span class="pageSpan_'+id+'" οnclick="'+funName+'('+(cPage-1)+')"><<</span>';
				}else{
					pageDiv = pageDiv + '<span class="pageSpan_'+id+'" οnclick="javascript:confirm(\'當前已爲第一頁\');"><<</span>';
				}
			}
			//前期頁區間前部分
		 	for(var i=1;i<c;i++){
		 		pageDiv = pageDiv +  '<span class="pageSpan_'+id+'" οnclick="'+funName+'('+(i*space)+')">'+(i*space)+'</span>';	
			}
			//當前頁區間部分
			for(var i=(c-1)*space+1;i<=c*space&&i<=tPage;i++){
				//i = (i==0)?1:i;  //i=0時從1開始
				if(cPage==i){
					pageDiv = pageDiv +  '<span class="actionPageSpan_'+id+'">'+i+'</span>';
				}else{
					pageDiv = pageDiv +  '<span class="pageSpan_'+id+'" οnclick="'+funName+'('+i+')">'+i+'</span>';	
				}
			}
			//當前頁區間後部分
			for(var i=c+1;i*space<=tPage;i++){
				pageDiv = pageDiv +  '<span class="pageSpan_'+id+'" οnclick="'+funName+'('+(i*space)+')">'+(i*space)+'</span>';
			}
			//下一頁
			if(this.options.showNext){
				if(cPage<tPage){
					pageDiv = pageDiv + '<span class="pageSpan_'+id+'" οnclick="'+funName+'('+(cPage+1)+')">>></span>';
				}else{
					pageDiv = pageDiv + '<span class="pageSpan_'+id+'" οnclick="javascript:confirm(\'當前已爲最後一頁\');">>></span>';
				}
			}
			//最後頁
			if(this.options.showLast){
				pageDiv = pageDiv + '<span class="pageSpan_'+id+'" οnclick="'+funName+'('+tPage+')">>|</span>';	
			}
			this.$element.html(pageDiv);
			
			//設置相關樣式
			var div = $.extend({},this.defaults.div,this.options.div);
			this.$element.css(div);
			var btn = $.extend({},this.defaults.btn,this.options.btn);
			this.$element.find(".pageSpan_"+id).css(btn);
			var obj = this;
			this.$element.find(".pageSpan_"+id).hover(function(){
				var btnOver =  $.extend({},obj.defaults.btnOver,obj.options.btnOver);
				$(this).css(btnOver);
			},function(){
				var btnOut =  $.extend({},obj.defaults.btnOut,obj.options.btnOut);
				$(this).css(btnOut);
			});
			this.$element.find(".actionPageSpan_"+id).css(this.options.btnAction);
		}
	};
	
	//添加插件到jQuery
	$.fn.simplePaging = function(options){
		var simplePaging = new SimplePaging(this,options);
		return simplePaging.writePageBtn();
	};
	
})(jQuery,window,document);

注意：該js插件是基於jquery開發的，使用時需先導入jquery

 

簡單使用代碼：

<html>
<script src="jquery-1.10.2.js" ></script>
<script src="simplePaging.js"></script>
<script type="text/javascript">
	
function load(){
	var param = {
		"cPage":1,
		"tPage":54,
		"clickFun":"test",  //該函數接受一個cPage參數
		"showLast":false,
		"div":{"float":"left"}
	};
	$("#testDiv").simplePaging(param);
}

function test(cPage){
   //業務代碼塊

  //分頁按鈕組控制塊
	var param = {
		"cPage":cPage,
		"tPage":54,
		"clickFun":"test",
		"showLast":false,
		"div":{"float":"left"}
	};
	$("#testDiv").simplePaging(param);
}

</script>
<body οnlοad="load()">
<div id="testDiv">
	<!-- 分頁標籤按鈕 -->
</div>
</body>
</html>

效果：

插件參數說明：

this.defaults = {
			'test':"aaa",  //開發測試參數，無任何意義
			//必須參數
			'cPage':1,  //顯示的當前頁碼
			'tPage':1,  //顯示的總頁數
			'clickFun':null,  //點擊頁碼調用的函數名，該函數默認接受一個cPage參數
			//可選參數
			'space':10,  //隱藏頁碼的間距
			'showLast':true,  //是否顯示第一頁和最後頁按鈕組  true爲顯示
			'showNext':true,  //是否顯示下一頁和上一頁按鈕組  true爲顯示
			'div':{ },  //分頁按鈕組div的css樣式
			'btn':{ },  //分頁按鈕組div中的頁碼按鈕的css樣式
			'btnOver':{ },  //鼠標浮在頁碼按鈕上是頁碼按鈕的css樣式
			'btnOut':{ },  //鼠標離開頁碼按鈕後頁碼按鈕的css樣式
			'btnAction':{},  //當前頁碼按鈕的頁碼css樣式
		};
//該參數爲默認參數，可以根據需要二次開發，自定義參數

實際項目中的效果圖