jquery ajax分页插件

--------------------------------------------------------分页插件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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值