基于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使用prototype定义对象类型(转)[
Dec 22 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
angular中的cookie读写方法
Aug 02 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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
一个域名查询的程序
2006/10/09 PHP
php在字符串中查找另一个字符串
2008/11/19 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
学院书画协会部门职责
2013/11/28 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
公司经理任命书
2014/06/05 职场文书
诉讼授权委托书
2014/10/15 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
2015员工年度考核评语
2015/03/25 职场文书
2016新年年会主持词
2015/07/06 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS