基于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.masonry瀑布流效果
May 25 jQuery
jquery拖动改变div大小
Jul 04 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
jQuery treeview树形结构应用
Mar 24 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
农民和部队如何穿矿
2020/03/04 星际争霸
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
js停止输出代码
2008/07/20 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
javascript实现密码验证
2015/11/10 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python文件与文件夹常见基本操作总结
2016/09/19 Python
使用django实现一个代码发布系统
2019/07/18 Python
keras 权重保存和权重载入方式
2020/05/21 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
Servlet面试题库
2015/07/18 面试题
作风建设演讲稿
2014/05/23 职场文书
整改报告格式
2014/11/06 职场文书
金秋助学感谢信
2015/01/21 职场文书
小学教师年度个人总结
2015/02/05 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python