【轉載】jquery插件--簡單的分頁插件

時間 2019-11-11

原文原文鏈接

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

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

具體js插件代碼以下：html

[javascript] view plain copy

;(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+'" onclick="'+funName+'(1)">|<</span>';
}
//上一頁
if(this.options.showNext){
if(cPage>1){
pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="'+funName+'('+(cPage-1)+')"><<</span>';
}else{
pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="javascript:confirm(\'當前已爲第一頁\');"><<</span>';
}
}
//前期頁區間前部分
for(var i=1;i<c;i++){
pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="'+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+'" onclick="'+funName+'('+i+')">'+i+'</span>';
}
}
//當前頁區間後部分
for(var i=c+1;i*space<=tPage;i++){
pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="'+funName+'('+(i*space)+')">'+(i*space)+'</span>';
}
//下一頁
if(this.options.showNext){
if(cPage<tPage){
pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="'+funName+'('+(cPage+1)+')">>></span>';
}else{
pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="javascript:confirm(\'當前已爲最後一頁\');">>></span>';
}
}
//最後頁
if(this.options.showLast){
pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="'+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);