Let’s take a look at the renderings first:
Simple paging js code:
1. Effect description:
jQuery plugin that can be displayed without pagination
jQuery paging plugin - jQuery.page.js is very simple to use and has great effect
2. Call method:
$(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //Click the callback method, p is the current page number} }); pageCount: Total number of pages current: current page3. js encapsulation code
//Pagination plugin/** ch **/ (function($){ var ms = { init:function(obj,args){ return (function(){ ms.fillHtml(obj,args); ms.bindEvent(obj,args); })(); }, //Fill html fillHtml:function(obj,args){ return (function(){ obj.empty(); //Previous page if(args.current > 1){ obj.append('<a href="javascript:;">PrevPage'); }else{ obj.remove('.prevPage'); obj.append('<span>Previous page</span>'); } //middle page number if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ obj.append('<a href="javascript:;">'+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:;">'+ start +'</a>'); }else{ obj.append('<span>'+ 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:;">'+args.pageCount+'</a>'); } //Next page if(args.current < args.pageCount){ obj.append('<a href="javascript:;">next page</a>'); }else{ obj.remove('.nextPage'); obj.append('<span>next page</span>'); } })(); }, //Binding event 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); } }); //Previous page 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); } }); //Next page 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. Use demo:
<!DOCTYPE html> <html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title> A very simple jQuery paging plugin</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 #bfbf;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> </div> <span style="display:none;"> </span><!-- Code part begin --> <div> </div> <pre> Call method: $(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //Click the callback method, p is the current page number} }); pageCount: Total number of pages: current page</pre> </body> <script src="//www.VeVB.COM/ajaxjs/jquery.min.js"></script> <script src="//www.VeVB.COM/ajaxjs/jquery.page.js"></script> <script> $(".tcdPageCode").createPage({ pageCount:6, current:1, backFn:function(p){ console.log(p); } }); </script> <!-- Code part end --> </html>The above is all about this article, I hope it will be helpful to everyone to learn Javascript.