基于bootstrap3和jquery的分页插件


Posted in Javascript onJuly 31, 2015

自己写的一款基于bootstrap3和jquery的分页插件,初学jquery插件写法,写的很一般。拿出来献丑了。

/**
* 基于bootstrap3的jquery分页插件
* 调用方式分两种
* 1.直接调用法
*  普通大小
*  $.mypage(id,now,max,fn);
*  大尺寸
*  $.mypagelg(id,now,max,fn);
*  小尺寸
*  $.mypagesm(id,now,max,fn);
* 
*  参数说明:id为放置分页容器的ID,now为当前页,max为最大页,fn为回掉函数,回掉函数有一个参数为点击的页码
* 
* 2.选择器调用法
*  $(selector).mypage({
*   now:now,
*   last:last,
*   callback:fn,
*   max:max,
*   first:first,
*   style,style
*  });
*  参数说明:now为当前页,max为最大页,callback为回掉函数,回掉函数有一个参数为点击的页码,style可选参数,有"big" 和"small",fitst为首页按钮的文本,last为尾页按钮的文本
* 
* 当最大页为1时将不显示,当当前页设置小于1时默认为1,当前页大于最大页时默认为最大页
* 引用本js前请先引用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);

以上所述就是本文的全部内容了,希望对大家学习jQuery能够有所帮助。

Javascript 相关文章推荐
javascript之更有效率的字符串替换
Aug 02 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
jquery-tips悬浮提示插件分享
Jul 31 #Javascript
javascript实现检验的各种规则
Jul 31 #Javascript
纯JS实现本地图片预览的方法
Jul 31 #Javascript
javascript动画算法实例分析
Jul 31 #Javascript
jquery实现手机号码选号的方法
Jul 31 #Javascript
javascript文本模板用法实例
Jul 31 #Javascript
Javascript实现网络监测的方法
Jul 31 #Javascript
You might like
PHP生成月历代码
2007/06/14 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
如何使用Strace调试工具
2013/06/03 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
微信小程序签到功能
2018/10/31 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python自动化报告的输出用例详解
2018/05/30 Python
pycharm配置git(图文教程)
2019/08/16 Python
python3获取url文件大小示例代码
2019/09/18 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
校本教研工作制度
2014/01/22 职场文书
工程项目经理任命书
2014/06/05 职场文书
企业文化口号
2014/06/12 职场文书
运动会运动员赞词
2015/07/22 职场文书