【bootstrap3】基于bootstrap3和jquery的分页插件-jquery-分页插件

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【基于bootstrap3和jquery的分页插件】，下面是详细的讲解！

基于bootstrap3和jquery的分页插件

(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=http://www.jb51.net/article/\"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=http://www.jb51.net/article/\"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=http://www.jb51.net/article/\"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=http://www.jb51.net/article/\"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=http://www.jb51.net/article/\"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);

关于基于bootstrap3和jquery的分页插件的用户互动如下：

　　相关问题：3.2版本，bootstrap分页怎么做

　　答：分页： 在ul上加上样式.pagination, 然后下面就是一个一个的li. 然后实现效果 >>详细

　　相关问题：bootstrap中jquery必须在所有插件之前引入页面什么...

　　答：因为bootstrap制作的插件都是用jquery实现的，就是里面的语法都是按jquery的，所以一定要先引入jquery.js文件，才能用bootstrap插件，不然就会报错，效果出不来。 >>详细

　　相关问题：3.2版本，bootstrap分页怎么做

　　答：使用BootStrap的table表格，如何利用BootStrap的分页插件Paginator实现... bootstrap只是一个前端框架 既然你已经做好了分页空间，那么只需要在前端使用 1 2 ... 将分页控件包裹一下就好了。 >>详细