简单的分页代码js实现


Posted in Javascript onMay 17, 2016

先看看效果图:

简单的分页代码js实现

简单的分页js代码:
1、效果描述: 
不用分页即可显示的jQuery插件 
jQuery分页插件——jQuery.page.js用法很简单,效果很棒  
2、调用方法:  

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

3、js封装代码

//分页插件 
/** 
ch 
**/ 
(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:;" 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:;" 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:;" 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:;" class="tcdNumber">'+args.pageCount+'</a>'); 
    } 
    //下一页 
    if(args.current < args.pageCount){ 
     obj.append('<a href="javascript:;" 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);

4、使用demo:

<!DOCTYPE html> 
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> 
<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;} 
.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> 
<style> 
.baidu_ads{ width:960px; height:90px; position:absolute; left:50%; bottom:0; margin-left:-480px; overflow:hidden;} 
</style> 
<div class="baidu_ads"> 
</div> 
 
<span style="display:none;"> 
</span><!-- 代码部分begin --> 
 <div class="tcdPageCode"> 
 </div> 
 <pre> 
 调用方法: 
 $(".tcdPageCode").createPage({ 
  pageCount:10, 
  current:1, 
  backFn:function(p){ 
   //单击回调方法,p是当前页码 
  } 
 }); 
 pageCount:总页数 
 current:当前页 
 </pre> 
</body> 
<script src="https://3water.com/ajaxjs/jquery.min.js"></script> 
<script src="https://3water.com/ajaxjs/jquery.page.js"></script> 
<script> 
 $(".tcdPageCode").createPage({ 
  pageCount:6, 
  current:1, 
  backFn:function(p){ 
   console.log(p); 
  } 
 }); 
</script> 
<!-- 代码部分end --> 
</html>

以上就是本文的全部内容,希望对大家学习Javascript有所帮助。

Javascript 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
Js获取图片原始宽高的实现代码
May 17 #Javascript
创建一个类Person的简单实例
May 17 #Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 #Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 #Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 #Javascript
Winform客户端向web地址传参接收参数的方法
May 17 #Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 #Javascript
You might like
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
JS中数据结构之栈
2019/01/01 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
python使用PyGame模块播放声音的方法
2015/05/20 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
python实现银行实战系统
2020/02/26 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
什么是唯一索引
2015/07/05 面试题
校运会入场式解说词
2014/02/10 职场文书
先进个人推荐材料
2014/12/29 职场文书
教师辞职书范文
2015/02/26 职场文书
部门2015年度工作总结
2015/04/29 职场文书
小学运动会加油稿
2015/07/22 职场文书
Java 多线程协作作业之信号同步
2022/05/11 Java/Android
MySQL数据库之存储过程 procedure
2022/06/16 MySQL