基于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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实现视频展示效果
May 30 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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基本语法总结
2014/09/06 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
php中错误处理操作实例分析
2019/08/23 PHP
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
js实现转动骰子模型
2019/10/24 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
图解Python变量与赋值
2018/04/03 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python按比例随机切分数据的实现
2019/07/11 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
python装饰器代码深入讲解
2021/03/01 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
应届生妇产科护士求职信
2013/10/27 职场文书
毕业生自我鉴定
2013/11/05 职场文书
推荐信格式要求
2014/05/09 职场文书
项目申请汇报材料
2014/08/16 职场文书
公司总经理岗位职责
2015/04/01 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python
Java 写一个简单的图书管理系统
2022/04/26 Java/Android