基于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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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
PL-880隐藏功能
2021/03/01 无线电
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
vue之延时刷新实例
2019/11/14 Javascript
JS实现简单打字测试
2020/06/24 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
用Python实现大文本文件切割的方法
2019/01/12 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
P/Invoke是什么
2015/07/31 面试题
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
英语读书笔记
2015/07/02 职场文书
投诉书范文
2015/07/02 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android