由于项目需要实现分页效果，上jQuery插件库找了下，但是木有找到自己想要的效果，于是自己封装了个分页组件。
思路：
主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新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: */ (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='<div>'+ '<span>'+ '共<span>'+this.settings.totalLists+'</span>条记录，'+ '第<span>'+curPage+'</span>/'+ '<span>'+this.settings.totalPages+'</span>页'+ '</span>'+ '<div>'+ '<ul>'+ '<li>首页</li>'+ '<li>« 上一页</li>'+ '<li>下一页 »</li>'+ '<li>末页</li>'+ '</ul>'+ '</div>'+ '<div>'+ '<span>第：<input type="number" value="'+this.settings.inputVal+'">页</span>'+ '<input type="button" value="Go">'+ '</div>'+ '</div>'; $(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.组件调用
通过 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