基于jquery的ajax分页效果

好久没有更新内容了，因为我正在学习新的技术，最近公司业务突然繁忙，又开始更新最近写的东西了。

效果图如上。

DOM:

<div class="J_SelectPage module-pages-select" data-current-page="1" data-total-page="12">
    <span class="prev-btn no-disable">上一页</span>
    <span class="pages-list">
    </span>
    <span class="next-btn">下一页</span>
    <span class="pages-size">共<em><i>1</i>/<i>10</i></em>页</span>
    <span class="goto-page">到第<input type="text" value="1" />页<a href="javascript:void(0);">确定</a></span>
</div>

参数说明:

data-current-page="1" 和 data-total-page="12",分别标示当前页和总的页数

CSS:

.module-pages-select{height:20px; line-height:20px;color:#999;}
.module-pages-select span{border-radius:5px;-webkit-border-radius:display:block;height:20px; float:left; margin:0 5px;}
.module-pages-select .prev-btn,.module-pages-select .next-btn{border:1px solid #e6e6e6;cursor:pointer;padding:0 5px; color:#fa6e00;}
.module-pages-select .no-disable{color:#ccc; cursor:default;}
.module-pages-select .pages-list a{border-radius:5px;-webkit-border-radius:5px; display:block;height:20px;width:20px; text-align:center;float:left;margin:0 2px;border:1px solid #e6e6e6; color:#666;}
.module-pages-select .pages-list a.selected{ background:#fce3c5;border-color:#fa6e00; color:#fa6e00;}
.module-pages-select .pages-list b{ float:left; font-family:verdana;color:#999;}
.module-pages-select span.pages-size{border:1px solid #fff;color:#999;}
.module-pages-select span.pages-size i{font-style:normal;}

.module-pages-select input{ position:relative;top:1px; margin:0 2px;width:20px;height:16px;_height:15px;*+height:15px;color:#999;border:1px solid #E6E6E6;border-radius:5px;-webkit-border-radius:5px; text-align:center;}
.module-pages-select .goto-page a{color:#999;border:1px solid #E6E6E6; margin-left:5px; padding:1px 3px;*+padding:1px 3px 0;border-radius:5px;-webkit-border-radius:5px;}

可自由配置你的样式

JS:

(function(){
    //ajax分页插件
    function SelectPage(args){
        var $this$=this;
        //保存分页插件
        this.pageBox=args.pageNode;
        //保存目标内容区域
        this.insertBox=args.insertBox;
        //保存url
        this.pageUrl=args.pageUrl;
        //保存总页数
        this.totalPageSize=parseInt(this.pageBox.attr("data-total-page"));
        //保存分页列表盒子
        this.pageListBox=$(".pages-list",this.pageBox);
        //保存上下翻页按钮
        this.prevBtn=$(".prev-btn",this.pageBox);
        this.nextBtn=$(".next-btn",this.pageBox);
        //初始化分页列表
        this.initPageList(this.totalPageSize);
        //在pageBox添加click事件
        this.pageListBox.click(function(e){
            //如果总页数是小于等于5的,就直接发送请求，否则动态创建
            if(e.target.tagName=="A"&&!$(e.target).hasClass("selected")){
                var pageIndex=parseInt($(e.target).text());
                //前往指定页码
                $this$.gotoPage(pageIndex);
            };    
        });
    
        //设置计数器的值
        this.pageLoop=parseInt(this.pageBox.attr("data-current-page"));
        
        this.prevBtn.click(function(){
            if(!$(this).hasClass("no-disable")){
                $this$.pageLoop--;
                $this$.gotoPage($this$.pageLoop);
            };
        });
        this.nextBtn.click(function(){
            if(!$(this).hasClass("no-disable")){
                $this$.pageLoop++;
                $this$.gotoPage($this$.pageLoop);
            };
        });    
        //获取当前页和总页的em节点
        this.currentEmNode=$("i",this.pageBox).eq(0);
        this.totalEmNode=$("i",this.pageBox).eq(1).text(this.totalPageSize);
        
        /////////////////////////////////////////////////以下是添加跳到指定页的功能
        this.gotoInput=$(".goto-page input",this.pageBox).val($this$.pageBox.attr("data-current-page"));
        this.gotoBtn=$(".goto-page a",this.pageBox);
        
        this.gotoInput.keyup(function(){
            var curIndex=this.value;
            if(isNaN(curIndex)){//如果输入不是数就设置为当前页
                this.value=$this$.pageListBox.find(".selected").text();
            }else if(curIndex<1){
                this.value=1;
            }else if(curIndex>$this$.totalPageSize){
                this.value=$this$.totalPageSize;
            };
        });
        this.gotoBtn.click(function(){
            var gotoIndex=parseInt($this$.gotoInput.val()),
                pageSelectedIndex=parseInt($this$.pageListBox.find(".selected").text());
            if(gotoIndex!=pageSelectedIndex){
                $this$.gotoPage(gotoIndex);
            };
        });
        /////////////////////////////////////////////////以上是添加跳到指定页的功能
    
    };
    SelectPage.prototype={
        //发送页码
        sendPage:function(pageIndex){
            //alert(pageIndex);
            var _this=this;
            //发送页码
            $.post(this.pageUrl,{currentPage:pageIndex},function(ret){
                
                var htmlContent = "";
                var data = ret['items']; 
                for(var i=0;i<ret['items'].length;i++){
                    var pro = data[i];
                    htmlContent += "<tr><td>"+pro['title']+"</td><td>"+pro['message']+"</td><td><em>"+pro['points']+"</em></td><td><em>"+pro['fameValue']+"</em></td><td>"+pro['createDate']+"</td></tr>";
                }
                
                //数据返回成功，先清楚内容
                _this.insertBox.empty().html(htmlContent);    
            
            },"json");
        
        },
        gotoPage:function(pageIndex){
            var _this_=this;
            //如果总页数是小于等于5的就直接发送请求，否则发送请求的同时在动态创建分页
            if(_this_.totalPageSize<=5){
                _this_.sendPage(pageIndex);
                //切换相关样式
                _this_.changeStyle(pageIndex);
            }else{
                _this_.sendPage(pageIndex);
                //如果分页数大于5，就动态改变
                _this_.addNewPageList(pageIndex)
                //切换相关样式
                _this_.changeStyle(pageIndex);
            };
            //设置计数器的值
            this.pageLoop=pageIndex;
            //设置当前值
            this.pageBox.attr("data-current-page",pageIndex);
            //设置实时页数
            this.currentEmNode.text(pageIndex);
            //设置输入框的值
            this.gotoInput.val(pageIndex);
        },
        //重新创建分页列表
        addNewPageList:function(pageIndex){
            if(pageIndex<3){
                //添加分页列表
                this.addPageList(3,true,true);
            }else{
                //添加分页列表
                this.addPageList(3,true,true);
                //绘制区间
                this.addMinToMaxPage(pageIndex);
            };    
        },
        //绘制一个指定区间的分页
        addMinToMaxPage:function(pageIndex){
            //this.totalPageSize
            if(pageIndex==3){
                for(var i=3;i<6;i++){
                    this.pageListBox.append("<a href='javascript:void(0);'>"+(i+1)+"</a>");
                };
            }else if(pageIndex==4){
                for(var i=3;i<6;i++){
                    this.pageListBox.append("<a href='javascript:void(0);'>"+(i+1)+"</a>");
                };
            }else if(pageIndex==this.totalPageSize){
                var ma=pageIndex==this.totalPageSize?this.totalPageSize:pageIndex-1;
                for(var i=this.totalPageSize-3;i<ma;i++){
                    this.pageListBox.append("<a href='javascript:void(0);'>"+(i+1)+"</a>");
                };
            }else{
                var ma=pageIndex+1>this.totalPageSize?this.totalPageSize:pageIndex+1;
                for(var i=pageIndex-2;i<ma;i++){
                    this.pageListBox.append("<a href='javascript:void(0);'>"+(i+1)+"</a>");
                };    
            };
        },
        //第一次初始化分页列表
        initPageList:function(pageSize){
            //当页数小于等于5的时候
            if(pageSize<=5){
                //添加分页列表
                this.addPageList(pageSize,false);
            }else{
                //添加分页列表
                this.addPageList(3,true);
            };  
        },
        //切换选中样式
        changeStyle:function(currentIndex){
            //切换当前页码样式
            this.pageListBox.find("a:contains("+currentIndex+")").addClass("selected").siblings().removeClass("selected");
            //切换上下按钮样式
            if(currentIndex==1){
                this.prevBtn.addClass("no-disable");
            }else{
                this.prevBtn.removeClass("no-disable");
            };
            if(currentIndex==this.totalPageSize){
                this.nextBtn.addClass("no-disable");
            }else{
                this.nextBtn.removeClass("no-disable");
            };
        },
        //指定添加几个分页
        addPageList:function(length,isAddPoint,isEmpty){
            if(isEmpty){//知道添加前是否清楚原来的
                this.pageListBox.empty()
            };
            for(var i=0;i<length;i++){
                if(i==0){
                    this.pageListBox.append("<a href='javascript:void(0);' class='selected'>"+(i+1)+"</a>");
                }else{
                    this.pageListBox.append("<a href='javascript:void(0);'>"+(i+1)+"</a>");
                };
            };
            if(isAddPoint){
                this.pageListBox.append("<b>...</b>");
            };
        }
    };
    window["SelectPage"]=SelectPage;
})();

使用方式:

1,引入JQ和对应的css和js代码；

调用方法：

    $(function(){
        /*创建一个分页*/
        var selectPage=new SelectPage({
                                        pageNode:$(".J_SelectPage").eq(0),//这里传入一个分页节点对象
                                        insertBox:$("#pageContetReload"),//这里传入一个需要插入内容的目标
                                        pageUrl:"http://www.pinzhi365.com"//这里是请求的url
                                    });
    });