今天就跟大家聊聊有关利用jQuery怎么封装一个分页组件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
专注于为中小企业提供网站建设、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业白云免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
思路:
主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新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=''+ ''+ '共'+this.settings.totalLists+'条记录,'+ '第'+curPage+'/'+ ''+this.settings.totalPages+'页'+ ''+ ''; $(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'+ ''+ ''+ '
'+ '- 首页
'+ '- « 上一页
'+ '- 下一页 »
'+ '- 末页
'+ ''+ '第:页'+ ''+ ''+ '=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.组件调用
通过 window.pageInit= $.pageInit=pageInit 可完成分页组件初始化。
暴露出来的接口分别为:
1.container:DOM的容器,默认.page
2.setPos:DOM放置的HTML位置,默认body
3.totalPages:默认的页数,必填,默认null
4.totalLists:默认的数据总数,必填,默认null
5.initPage:当前页,默认第一页
6.inputVal:跳转页,默认第一页
7.callBack:执行的回调函数,必填,默认null
基于jQuery封装的分页组件
效果:
通过callBack接口,添加自己所需要执行的function函数,并且需要return true时才回执行动态的DOM渲染。
看完上述内容,你们对利用jQuery怎么封装一个分页组件有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
售后响应及时
7×24小时客服热线数据备份
更安全、更高效、更稳定价格公道精准
项目经理精准报价不弄虚作假合作无风险
重合同讲信誉,无效全额退款