基于jQuery封装的分页组件
分类:jQuery作者:编程之家用户
由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件。
思路:
主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页效果。
1.page.init.css
2.pageInit.js
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 class="page">'+
'<span class="page_details">'+
'共<span class="page_num">'+this.settings.totalLists+'条记录,'+
'第<span class="page_current">'+curPage+'/'+
'<span class="page_size">'+this.settings.totalPages+'页'+
''+
'<div class="page_to">'+
'<ul class="flex_parent">'+
'<li class="page_first flex_child">首页'+
'<li class="page_pre page_hide flex_child">« 上一页'+
'<li class="page_next flex_child">下一页 »'+
'<li class="page_last flex_child">末页'+
''+
'
'+
'<div class="page_jump">'+
'
第:<input type="number" class="page_jump_input" value="'+this.settings.inputVal+'">页'+
'<input type="button" class="page_jump_btn" value="Go">'+
'
'+
'
';
$(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,undefined);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。