Since the project needed to achieve the paging effect, I searched for it in the jQuery plug-in library, but I couldn’t find the effect I wanted, so I encapsulated a paging component myself. This article mainly introduces the paging component based on jQuery encapsulation in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
Idea:
Mainly based on the paging template established based on the prototype during initialization and then binding dynamic events to achieve the paging effect of refreshing the DOM.
1.page.init.css
@charset "utf=8"; *{ box-sizing: border-box; padding: 0; margin: 0; } .page{ font-size: 13px; text-align: right; } .page .page_to{ display: inline-block; max-width: 250px; } .page .page_to li{ display: inline-block; width: auto; height: auto; border: 1px solid #ddd; padding:5px 10px; border-left-width: 0; color: #323232; cursor: pointer; } .page .page_to li.page_hide{ display: none; } .page .page_to li:hover{ color: #32C2CD; background-color: #f4f4f4; border-color: #DDDDDD; } .page .page_to li:first-child{ border-left-width: 1px; } .page .page_jump{ display: inline-block; width: 180px; } .page .page_jump input.page_jump_input{ width: 52px; height: 28px; text-align: center; text-decoration: none; background-color: #fff; border: 1px solid #ddd; margin:0 4px; } .page .page_jump input.page_jump_btn{ display: inline-block; padding: 7px 20px; margin-left: 5px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; border-radius: 4px; background-color: #00BB9C; color: #FFFFFF; font-weight: bold; }
2.pageInit.js
/** * Created: 2017/6/20. * author: Aaron * address: http://www.cnblogs.com/aaron-pan/ */ (function($,window,undefined){ var curPage='', //跳转是否有值 jumpVal='', //从DOM中重新获取数据总数/总页数 lists='', totals='', //是否返回值 isTrue=false; var Page=function(opts){ this.settings= $.extend({},Page.defaults,opts); curPage=this.settings.initPage; totals=this.settings.totalPages; jumpVal=this.settings.inputVal; this.init(); }; //默认配置 Page.defaults={ container:'.page', setPos:'body', totalPages:null, totalLists:null, initPage:1, inputVal:1, callBack:null }; Page.prototype={ init:function(){ this.create(); }, create:function(){ var _template='<p class="page">'+ '<span class="page_details">'+ '共<span class="page_num">'+this.settings.totalLists+'</span>条记录,'+ '第<span class="page_current">'+curPage+'</span>/'+ '<span class="page_size">'+this.settings.totalPages+'</span>页'+ '</span>'+ '<p class="page_to">'+ '<ul class="flex_parent">'+ '<li class="page_first flex_child">首页</li>'+ '<li class="page_pre page_hide flex_child">« 上一页</li>'+ '<li class="page_next flex_child">下一页 »</li>'+ '<li class="page_last flex_child">末页</li>'+ '</ul>'+ '</p>'+ '<p class="page_jump">'+ '<span>第:<input type="number" class="page_jump_input" value="'+this.settings.inputVal+'">页</span>'+ '<input type="button" class="page_jump_btn" value="Go">'+ '</p>'+ '</p>'; $(this.settings.setPos).append(_template); this.refreshDom(); this.bindEvent(); }, bindEvent:function(){ var _this=this; //跳转首页 $(this.settings.container).on("click",".page_first",function(){ lists=$(_this.settings.container).find(".page_num").text(); totals=$(_this.settings.container).find(".page_size").text(); if($.isFunction(_this.settings.callBack)){ curPage=1; isTrue=_this.settings.callBack(1); if(isTrue){ _this.refreshDom(); $(_this.settings.container).find(".page_current").text(1); $(_this.settings.container).find(".page_jump_input").val(curPage); } } }); //跳转上一页 $(this.settings.container).on("click",".page_pre",function(){ lists=$(_this.settings.container).find(".page_num").text(); totals=$(_this.settings.container).find(".page_size").text(); if($.isFunction(_this.settings.callBack)){ if(curPage>1){ curPage=curPage-1; isTrue=_this.settings.callBack(curPage); if(isTrue){ _this.refreshDom(); $(_this.settings.container).find(".page_current").text(curPage); $(_this.settings.container).find(".page_jump_input").val(curPage); } } } }); //跳转下一页 $(this.settings.container).on("click",".page_next",function(){ lists=$(_this.settings.container).find(".page_num").text(); totals=$(_this.settings.container).find(".page_size").text(); if($.isFunction(_this.settings.callBack)){ if(curPage<totals){ curPage=curPage+1; isTrue=_this.settings.callBack(curPage); if(isTrue){ _this.refreshDom(); $(_this.settings.container).find(".page_current").text(curPage); $(_this.settings.container).find(".page_jump_input").val(curPage); } } } }); //跳转末页 $(this.settings.container).on("click",".page_last",function(){ lists=$(_this.settings.container).find(".page_num").text(); totals=$(_this.settings.container).find(".page_size").text(); if($.isFunction(_this.settings.callBack)){ curPage=totals; isTrue=_this.settings.callBack(curPage); if(isTrue){ _this.refreshDom(); $(_this.settings.container).find(".page_current").text(totals); $(_this.settings.container).find(".page_jump_input").val(curPage); } } }); //Go跳转 $(this.settings.container).on("click",".page_jump_btn",function(){ lists=$(_this.settings.container).find(".page_num").text(); totals=$(_this.settings.container).find(".page_size").text(); if($.isFunction(_this.settings.callBack)){ jumpVal=Number($(_this.settings.container).find("input.page_jump_input").val()); console.log('跳转的页数:'+jumpVal+';跳转之前的页数:'+curPage); if(jumpVal>=1 && jumpVal <=totals){ curPage=jumpVal; isTrue=_this.settings.callBack(curPage); if(isTrue){ _this.refreshDom(); $(_this.settings.container).find(".page_current").text(curPage); } }else{ jumpVal=curPage; } } }); }, refreshDom:function(){ $(this.settings.container).find("li.flex_child").removeClass("page_hide"); if(Number(totals)==1){ $(this.settings.container).find(".page_pre").addClass("page_hide"); $(this.settings.container).find(".page_next").addClass("page_hide"); } else if(Number(totals)==2){ if(Number(curPage)==1){ $(this.settings.container).find(".page_pre").addClass("page_hide"); }else{ $(this.settings.container).find(".page_next").addClass("page_hide"); } } else if(Number(curPage)==1 && Number(totals)>2){ $(this.settings.container).find(".page_pre").addClass("page_hide"); } else if(Number(curPage)==Number(totals) && Number(totals)>2){ $(this.settings.container).find(".page_next").addClass("page_hide"); } } }; var pageInit=function(opts){ return new Page(opts); }; window.pageInit= $.pageInit=pageInit; })(jQuery,window,undefined);
3. Component call
Paging component initialization can be completed through window.pageInit= $.pageInit=pageInit.
The exposed interfaces are:
1.container: DOM container, default.page
2.setPos: HTML position placed by DOM, default body
3.totalPages: Default number of pages, required, default null
4.totalLists: Default total number of data, required, default null
5.initPage: Current page ,Default first page
6.inputVal: Jump page, default first page
7.callBack: Executed callback function, required, default null
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>基于jQuery封装的分页组件</title> <link rel="stylesheet" href="css/page.init.css"> </head> <body> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> <script src="js/pageInit.js"></script> <script> $.pageInit( { container:'.page',//容器:默认page //setPos:'body',//放置位置:默认body totalPages:10,//总页数:必填 totalLists:100,//数据总数:必填 initPage:1,//初始页码:默认1 inputVal:1,//设置跳转的input值:默认1 //要执行的函数:默认null,必须为fn且返回true则可执行分页,false则不执行 callBack:function(n){ var flag=true; console.log(n); return flag; } } ); </script> </body> </html>
Effect:
Add the function function you need to execute through the callBack interface, and only perform dynamic DOM rendering when true is required.
#For more exciting content, please click: jquery paging function summary to learn.
Related recommendations:
JQuery encapsulated placeholder example code
A js paging based on jquery encapsulation_jquery
Jquery encapsulated dialog box simple implementation_jquery
The above is the detailed content of Detailed explanation of jQuery encapsulated paging component. For more information, please follow other related articles on the PHP Chinese website!