--------------------------------------------------------分页插件js文件源码[jquery.page.js]-----------------------------------------------------------------------
/**
@author rebin
@function jquery 分页插件
@xiefangjian@163.com
@create 2015-10-20
**/
(function($){
var noka_page = {
init:function(obj,args){
this.pagesize = (args.pagesize == undefined?8:args.pagesize);//页大小
this.nowpage = 1;//当前第几页
this.rowCount = 10;//总记录数
this.MaxPage = (args.MaxPage == undefined?8:args.MaxPage);//最大显示多少页
this.obj = obj;//页面对象
this.url = args.url;//数据请求地址
this.data = args.data;
this.par = (args.par==undefined)?{}:args.par;//传到后台的参数
this.par.nowpage = 1;
this.par.pagesize = this.pagesize;
this.pare = 0;
this.last = 0;
this.PageCount=0;
this.createHtml();
this.id = obj.attr('id');
},
//-------创建分页条-----------------------------------------------------
createHtml:function(){
var self = this;
$.ajax({
type:'POST',
url:self.url,
data:self.par,
dataType:'json',
success:function(json){//{nowpage:"",rowcount:"",data:[{},{}]}
self.nowpage = json.nowpage;
self.rowCount=json.rowcount;
self.PageHtml();
self.data(json.data);
},
error:function(a,b,c){
alert(a+' : '+b+' : '+c);
}
});
},
PageHtml:function(){
var self = this;
var idx = 0;
var phtml=[];
var PageCount = self.rowCount/self.pagesize;//总页数
var bMax = Math.floor(self.MaxPage / 2);//最大总页数的一半
//var spare = (self.nowpage / self.MaxPage) | 0;
var pre = self.nowpage-bMax;//((spare<1)?1:(spare * self.MaxPage)+1);//当前起始分页码
pre=(pre<1)?1:pre;
//pre=(pre>PageCount?spare:pre);
var last=parseInt(parseInt(self.nowpage)+bMax);//((PageCount>(pre+self.MaxPage))?(pre+self.MaxPage):PageCount);
last=(last>PageCount?PageCount:last);
if(pre==1){
for(var i=(last+1);i<=self.MaxPage;i++){
last++;
}
}
if(last==PageCount){
for(var i=(pre-1);i>(last-self.MaxPage);i--){
pre--;
}
}
self.pare = pre;
self.last = last;
self.PageCount = PageCount;
phtml[idx++]='<style type="text/css">';
phtml[idx++]='.MVCNormalPager{font-size:14px; text-align:center; margin:0 auto; margin-top:20px;}';
phtml[idx++]='.MVCNormalPager .mvcmenu {margin:3px; color:#999; float:right; display:block;}';
phtml[idx++]='.MVCNormalPager .mvcmenu a {text-decoration:none;border:1px solid #e8e8e8; margin:3px; padding:2px 15px; color:#999; float:left; display:block;}';
phtml[idx++]='.MVCNormalPager .mvcmenu a:hover {text-decoration:none;border: #0474c6 1px solid; color: #ffffff;background:#0474c6;cursor:pointer;}';
phtml[idx++]='.MVCNormalPager .mvcmenu a:active {text-decoration:none;border: #0474c6 1px solid; color: #ffffff;background:#0474c6;cursor:pointer;}';
phtml[idx++]='.MVCNormalPager .mvcmenu .mvccurrent {border:1px solid #e8e8e8; margin:3px; padding:2px 15px; color:#999; float:left; display:block;background-color:#0474c6;font-weight:bold;color:#fff;}';
phtml[idx++]='.MVCNormalPager .mvcmenu .mvcdisabled { border:1px solid #e8e8e8; margin:3px; padding:2px 15px; color:#999; float:left; display:block;}';
phtml[idx++]='.MVCNormalPager .mvcmenu .mvctext{border: 1px solid #E8E8E8;height: 27px;line-height: 27px;margin: 0 5px;text-align: center;width: 30px;float:left;margin-top: 2px;}';
phtml[idx++]='.MVCNormalPager .mvcmenu .button{background-color: #0474C6;border: medium none;color: #FFFFFF;display: block;float: left;font-size: 12px;height: 27px;line-height: 27px;width: 46px; cursor:pointer;border-radius: 3px;font-family: inherit;margin-top: 2px;}';
phtml[idx++]='</style>';
phtml[idx++]='<table align="center"><tr><td align="center">';
phtml[idx++]='<div class="MVCNormalPager"><div class="mvcmenu">';
if(self.nowpage>1){//当前不是第一页,显示上一页按钮
phtml[idx++]='<a href="#" id="'+self.id+'_upage">上一页</a>';
}
if(self.pare>1){//当前页大于最大显示页,需要翻页按钮
phtml[idx++]='<a href="#" id="'+self.id+'_uMaxpage">...</a>';
}
for(var i=pre;i<=last;i++){
if((i-pre)<self.MaxPage){
if(i==self.nowpage)
phtml[idx++]='<span class="mvccurrent">'+i+'</span>';
else
phtml[idx++]='<a href="#" class="'+self.id+'_ipage">'+i+'</a>';
}
}
if(last<PageCount){
phtml[idx++]='<a href="#" id="'+self.id+'_dMaxpage">...</a>';
}
if(self.nowpage<PageCount){
phtml[idx++]='<a href="#" id="'+self.id+'_dpage">下一页</a>';
}
phtml[idx++]='<span style="float:left;padding:5px 0px 0px 5px;">共'+PageCount+'页,到第</span>';
phtml[idx++]='<input type="text" class="mvctext" id="'+self.id+'_evalue" value="'+self.nowpage+'" /> ';
phtml[idx++]='<input type="button" value="确定" id="'+self.id+'_enpage" class="button"/>';
phtml[idx++]='<span id="_MvcPager_Ctrl0_piblink" style="display:none;width:0px;height:0px">';
phtml[idx++]='</div></div></td></tr></table>';
self.obj.html('');
self.obj.append(phtml.join('')).trigger('create');
self.btnEvent();
},
btnEvent:function(){
var self = this;
var upage = $('#'+self.id+'_upage');//上一页
var uMaxpage = $('#'+self.id+'_uMaxpage');//上max页
var ipage = $('.'+self.id+'_ipage');//第i页
var dMaxpage = $('#'+self.id+'_dMaxpage');//下max页
var dpage = $('#'+self.id+'_dpage');//下一页
var epage = $('#'+self.id+'_enpage');//自定义页
if(undefined != upage){
upage.on('click',function(){
self.nowpage--;
self.nowpage=self.nowpage<1?1:self.nowpage;
self.par.nowpage= self.nowpage;
self.createHtml();
});
}
if(undefined != uMaxpage){
uMaxpage.on('click',function(){
self.par.nowpage=(self.pare-1);
if(self.par.nowpage<1)
self.par.nowpage=1;
self.createHtml();
});
}
if(undefined != ipage){
ipage.on('click',function(){
self.par.nowpage= $(this).html();
self.createHtml();
});
}
if(undefined != dMaxpage){
dMaxpage.on('click',function(){
self.par.nowpage=(self.last+1);
if(self.par.nowpage>self.PageCount)
self.par.nowpage=self.PageCount;
self.createHtml();
});
}
if(undefined != dpage){//下一页
dpage.on('click',function(){
self.nowpage++;
self.nowpage=(self.nowpage)>self.PageCount?self.PageCount:self.nowpage;
self.par.nowpage= self.nowpage;
self.createHtml();
});
}
if(undefined != epage){
epage.on('click',function(){
var npg =$('#'+self.id+'_evalue').val();
if(npg>self.PageCount){
npg = self.PageCount;
alert("页索引超出范围");
}else if(npg<1){
npg = 1;
alert("页索引超出范围");
}
self.par.nowpage= npg;
self.createHtml();
});
}
}
};
$.fn.createPage = function(options){
var args = $.extend({
pagesize:10,
MaxPage:8,
data:function(){}//数据回调方法
},options);
noka_page.init(this,args);
};
})(jQuery);
--------------------------------------------------调用实例----------------------------------------------------------------------------
<div id="page_div"></div><!--分页显示区-->
<script type="text/javascript">
$('#page_div').createPate({
pagesize:10,//页大小,每页显示多少条数据,该参数传至后端,由后端处理
MaxPage:8,//分页显示栏,最多显示的页码数量
url:'',//后端服务器处理地址,传至后端的参数有pagesize 页大小,nowpage 当前页码
par:{//自定义传至后端的参数
a:''
},
data:function(a){}//回调方法,a为后端返回的数据对象,后端返回的数据为json格式,形如{"nowpage":"1","rowcount":"500","data":[{}]} rowcount为总记录数,前端根据该值进行分页计算,data为前端data回调方法里面的具体数据,在data回调方法中处理分页后的数据展现
});
</script>