简单的分页代码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 相关文章推荐
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
javascript事件模型介绍
May 31 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
Python内置函数locals和globals对比
2020/04/28 Python
python3中布局背景颜色代码分析
2020/12/01 Python
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
写给老师的表扬信
2014/01/21 职场文书
绿色环保标语
2014/06/12 职场文书