简单的分页代码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 相关文章推荐
jQuery 性能优化手册 推荐
Feb 23 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
jquery实现倒计时效果
Dec 14 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 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 IE中下载附件问题解决方法
2014/01/07 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
JavaScript中的undefined学习总结
2013/11/30 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
python numpy数组复制使用实例解析
2020/01/10 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
高中三年学习生活的自我评价
2013/10/10 职场文书
给领导的致歉信范文
2014/01/13 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
房产代理公证处委托书
2014/04/04 职场文书
初三学习计划书范文
2014/04/30 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
师范生见习报告
2014/10/31 职场文书
单位同意报考证明
2015/06/17 职场文书