简单的分页代码js实现

更新时间：2016年05月17日 16:03:09 作者：Senssic

简单的分页代码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://www.jb51.net/ajaxjs/jquery.min.js"></script> 
<script src="https://www.jb51.net/ajaxjs/jquery.page.js"></script> 
<script> 
 $(".tcdPageCode").createPage({ 
  pageCount:6, 
  current:1, 
  backFn:function(p){ 
   console.log(p); 
  } 
 }); 
</script> 
<!-- 代码部分end --> 
</html>

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

您可能感兴趣的文章:

js
分页

基于jQuery的模仿新浪微博时间的组件
废话不多说,实现原理主要是处理table,生成tr td,其中最重要的是如何找出每月第一天是星期几,然后就能对应出这个月的余下天数.
2011-10-10
JavaScript判断数组是否存在key的简单实例
下面小编就为大家带来一篇JavaScript判断数组是否存在key的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
JS模拟的腾讯微博app撕纸效果的实例代码
本来想用css3来实现，但后来脑袋一热就用了js，省的别人你ie怎么没效果啊！在腾讯微博app上看到的一个效果，鼠标击哪里就撕了哪里，跟撕报纸似的，任意点击左边面的灰色区域，查看效果，当时觉得很有意思，问了下高人，突然觉悟了，原来如此。。
2013-05-05
JSQL 基于客户端的成绩统计实现方法
JSQL应用案例基于客户端的成绩统计，下面我把整个example的代码贴出来，欢迎拍砖
2010-05-05
JS对HTML表格进行增删改操作
这篇文章主要为大家详细介绍了JS对HTML表格进行增删改操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
记一次webapck4 配置文件无效的解决历程
这篇文章主要介绍了记一次webapck4 配置文件无效的解决历程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
微信小程序之 catalog 切换实现解析
这篇文章主要介绍了微信小程序之 catalog 切换实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
javascript下利用数组缓存正则表达式的实现方法
利用组存大法要提高我们程序的性能，让我们的正则表达式的创建于执行更有效率。
2009-12-12
Echarts实现单条折线可拖拽效果
这篇文章主要为大家详细介绍了Echarts实现单条折线可拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
微信小程序—setTimeOut定时器的问题及解决
这篇文章主要介绍了微信小程序—setTimeOut定时器的问题及解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07

简单的分页代码js实现

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具