简单的分页代码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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
javascript iframe内的函数调用实现方法
Jul 19 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
基于node.js之调试器详解
Aug 22 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
使用python+whoosh实现全文检索
2019/12/09 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Python爬虫教程知识点总结
2020/10/19 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
人力资源行政经理自我评价
2013/10/23 职场文书
统计员岗位职责
2013/11/14 职场文书
学校门卫工作职责
2013/12/07 职场文书
关于迟到的检讨书
2014/01/26 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
redis实现排行榜功能
2021/05/24 Redis