简单的分页代码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 相关文章推荐
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
深入理解(function(){... })();
Aug 16 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 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中显示格式化的用户输入
2006/10/09 PHP
建立文件交换功能的脚本(一)
2006/10/09 PHP
PHP SQLite类
2009/05/07 PHP
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
对Python中range()函数和list的比较
2018/04/19 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python爬取网页信息的示例
2020/09/24 Python
重构Python代码的六个实例
2020/11/25 Python
python安装sklearn模块的方法详解
2020/11/28 Python
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
2014年公务员个人工作总结
2014/11/22 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
飞屋环游记观后感
2015/06/08 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python