微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

简单的分页代码js实现

先看看效果图:

简单的分页js代码:

1、效果描述:

不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒

2、调用方法

rush:js;"> $(".tcdPageCode").createPage({ pageCount:10,current:1,backFn:function(p){ //单击回调方法,p是当前页码 } }); pageCount:总页数 current:当前页

3、js封装代码

1){ obj.append(''); }else{ obj.remove('.prevPage'); obj.append(''); } //中间页码 if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ obj.append(''); } if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){ obj.append('...'); } 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(''); }else{ obj.append(''); } } } if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ obj.append('...'); } if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ obj.append(''); } //下一页 if(args.current < args.pageCount){ obj.append('下一页'); }else{ obj.remove('.nextPage'); obj.append('disabled">下一页'); } })(); },//绑定事件 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",{"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:

rush:js;"> <a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>非常简单的jQuery<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a><a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a>

<span style="display:none;">

<div class="tcdPageCode">

 
 调用方法: 
 $(".tcdPageCode").createPage({ 
  pageCount:10,backFn:function(p){ 
   //单击回调方法,p是当前页码 
  } 
 }); 
 pageCount:总页数 
 current:当前页 
 

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

原文地址:https://www.jb51.cc/js/48696.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐