基于jquery.page.js实现分页效果


Posted in jQuery onJanuary 01, 2018

基于jquery.page.js的一款简单的分页效果,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>简单的jQuery分页插件</title> 
<style> 
*{ margin:0; padding:0; list-style:none;} 
a{ text-decoration:none;} 
a:hover{ text-decoration:none;} 
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;} 
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} 
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} 
</style> 
</head> 
<body> 
<br><br><br> 
 
<div class="tcdPageCode"></div> 
 
<center><pre><br> 
</pre></center> 
 
<script src="js/jquery-1.8.3.min.js"></script> 
<script src="js/jquery.page.js"></script> 
<script> 
  $(".tcdPageCode").createPage({ 
    pageCount:100, 
    current:1, 
    backFn:function(p){ 
      console.log(p); 
    } 
  }); 
</script> 
</body> 
</html>

调用方法如下:

$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调方法,p是当前页码
}
});

pageCount:总页数
current:当前页

以下是jquery.page.js源代码:

(function($){ 
  var ms = { 
    init:function(obj,args){ 
      return (function(){ 
        ms.fillHtml(obj,args); 
        ms.bindEvent(obj,args); 
      })(); 
    }, 
    //填充html 
    fillHtml:function(obj,args){ 
      return (function(){ 
        obj.empty(); 
        //上一页 
        if(args.current > 1){ 
          obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prevPage">上一页</a>'); 
        }else{ 
          obj.remove('.prevPage'); 
          obj.append('<span class="disabled">上一页</span>'); 
        } 
        //中间页码 
        if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ 
          obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdNumber">'+1+'</a>'); 
        } 
        if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){ 
          obj.append('<span>...</span>'); 
        } 
        var start = args.current -2,end = args.current+2; 
        if((start > 1 && args.current < 4)||args.current == 1){ 
          end++; 
        } 
        if(args.current > args.pageCount-4 && args.current >= args.pageCount){ 
          start--; 
        } 
        for (;start <= end; start++) { 
          if(start <= args.pageCount && start >= 1){ 
            if(start != args.current){ 
              obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdNumber">'+ start +'</a>'); 
            }else{ 
              obj.append('<span class="current">'+ start +'</span>'); 
            } 
          } 
        } 
        if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ 
          obj.append('<span>...</span>'); 
        } 
        if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ 
          obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdNumber">'+args.pageCount+'</a>'); 
        } 
        //下一页 
        if(args.current < args.pageCount){ 
          obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nextPage">下一页</a>'); 
        }else{ 
          obj.remove('.nextPage'); 
          obj.append('<span class="disabled">下一页</span>'); 
        } 
      })(); 
    }, 
    //绑定事件 
    bindEvent:function(obj,args){ 
      return (function(){ 
        obj.on("click","a.tcdNumber",function(){ 
          var current = parseInt($(this).text()); 
          ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current); 
          } 
        }); 
        //上一页 
        obj.on("click","a.prevPage",function(){ 
          var current = parseInt(obj.children("span.current").text()); 
          ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current-1); 
          } 
        }); 
        //下一页 
        obj.on("click","a.nextPage",function(){ 
          var current = parseInt(obj.children("span.current").text()); 
          ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current+1); 
          } 
        }); 
      })(); 
    } 
  } 
  $.fn.createPage = function(options){ 
    var args = $.extend({ 
      pageCount : 10, 
      current : 1, 
      backFn : function(){} 
    },options); 
    ms.init(this,args); 
  } 
})(jQuery);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery实现企业定位式导航效果
Jan 01 #jQuery
jquery实现楼层滚动效果
Jan 01 #jQuery
jquery实现左右轮播切换效果
Jan 01 #jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 #jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
You might like
用PHP实现验证码功能
2006/10/09 PHP
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
10款实用的PHP开源工具
2015/10/23 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
基于node实现websocket协议
2016/04/25 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python通过future处理并发问题
2017/10/17 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
环保倡议书400字
2014/05/15 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android