基于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数字格式化通用类 accounting.js使用
Aug 24 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
checkbox在vue中的用法小结
Nov 13 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
如何用JS实现网页瀑布流布局
Apr 24 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
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
python实现中文转换url编码的方法
2016/06/14 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python分数表示方式和写法
2019/06/26 Python
利用python开发app实战的方法
2019/07/09 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
联想英国官网:Lenovo英国
2019/07/17 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
Android笔试题总结
2014/11/29 面试题
任命书范本大全
2014/06/06 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
2014年度考核工作总结
2014/12/24 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android