基于bootstrap3和jquery的分頁(yè)插件

2024-05-06 16:24:13

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了基于bootstrap3和jquery的分頁(yè)插件的相關(guān)資料,需要的朋友可以參考下

自己寫(xiě)的一款基于bootstrap3和jquery的分頁(yè)插件，初學(xué)jquery插件寫(xiě)法，寫(xiě)的很一般。拿出來(lái)獻(xiàn)丑了。

/**

* 基于bootstrap3的jquery分頁(yè)插件

* 調(diào)用方式分兩種

* 1.直接調(diào)用法

* 普通大小

* $.mypage(id,now,max,fn);

* 大尺寸

* $.mypagelg(id,now,max,fn);

* 小尺寸

* $.mypagesm(id,now,max,fn);

*

* 參數(shù)說(shuō)明：id為放置分頁(yè)容器的ID，now為當(dāng)前頁(yè)，max為最大頁(yè)，fn為回掉函數(shù)，回掉函數(shù)有一個(gè)參數(shù)為點(diǎn)擊的頁(yè)碼

*

* 2.選擇器調(diào)用法

* $(selector).mypage({

* now:now,

* last:last,

* callback:fn,

* max:max,

* first:first,

* style,style

* });

* 參數(shù)說(shuō)明：now為當(dāng)前頁(yè)，max為最大頁(yè)，callback為回掉函數(shù)，回掉函數(shù)有一個(gè)參數(shù)為點(diǎn)擊的頁(yè)碼，style可選參數(shù)，有"big" 和"small"，fitst為首頁(yè)按鈕的文本，last為尾頁(yè)按鈕的文本

*

* 當(dāng)最大頁(yè)為1時(shí)將不顯示，當(dāng)當(dāng)前頁(yè)設(shè)置小于1時(shí)默認(rèn)為1，當(dāng)前頁(yè)大于最大頁(yè)時(shí)默認(rèn)為最大頁(yè)

* 引用本js前請(qǐng)先引用jquery的js文件和bootstrap3的css文件

*

*/

(function ($) {

$.fn.mypage = function(options){

var defaults = {

now:1,

max:1,

callback:null,

style:null,

first:"«",

last:"»"

}

var options = $.extend(defaults, options);

this.each(function(){

options.max=Math.round(options.max);

options.now=Math.round(options.now);

if(options.max<=1||isNaN(options.max)||isNaN(options.now))return;

options.now=options.now<1?1:options.now>options.max?options.max:options.now;

var mainbox=$(this).html("");

var page_box= $("<ul></ul>").addClass("pagination").appendTo(mainbox);

if(options.style!=null) page_box.addClass(options.style=="big"?"pagination-lg":options.style=="small"?"pagination-sm":options.style)

var page_back=$("<li><a href=/"javascript:void(0)/">"+options.first+"</a></li>").appendTo(page_box);

if(options.now==1) page_back.addClass("disabled");

else page_back.on("click",function(){if(typeof options.callback === "function")options.callback(1);})

var page_next=$("<li><a href=/"javascript:void(0)/">"+options.last+"</a></li>");

if(options.now==options.max) page_next.addClass("disabled");

else page_next.on("click",function(){if(typeof options.callback === "function")options.callback(options.max);})

var page_now=$("<li><a href=/"javascript:void(0)/">"+options.now+"</a></li>").addClass("active");

if(options.max<=10)

for(var i=1;i<=options.max;i++) $.mypageInsertItem(i,options.now,page_now,page_box,options.callback);

else

if(options.now<5){

for(var i=1;i<=6;i++) $.mypageInsertItem(i,options.now,page_now,page_box,options.callback);

$.mypageInsertOther(page_box);

}else if(options.max-options.now<4){

$.mypageInsertOther(page_box);

for(var i=options.max-5;i<=options.max;i++) $.mypageInsertItem(i,options.now,page_now,page_box,options.callback);

}else{

$.mypageInsertOther(page_box);

for(var i=options.now-2;i<=options.now+2;i++) $.mypageInsertItem(i,options.now,page_now,page_box,options.callback);

$.mypageInsertOther(page_box);

}

page_next.appendTo(page_box);

})

},

$.mypageInsertItem=function(i,now,page_now,page_box,fn){

if(i!=now) $("<li><a href=/"javascript:void(0)/">"+i+"</a></li>").on("click",function(){if(typeof fn === "function")fn($(this).text());}).appendTo(page_box);

else page_now.appendTo(page_box);

},

$.mypageInsertOther=function(page_box){

$("<li><a href=/"javascript:void(0)/">…</a></li>").addClass("disabled").appendTo(page_box);

},

$.mypage=function(id,now,max,fn){$("#"+id).mypage({now:now,max:max,callback:fn})},

$.mypagesm=function(id,now,max,fn){$("#"+id).mypage({now:now,max:max,callback:fn,style:"pagination-sm"})},

$.mypagelg=function(id,now,max,fn){$("#"+id).mypage({now:now,max:max,callback:fn,style:"pagination-lg"})}

})(jQuery);