AJAX中怎么实现一个分页类

这篇文章给大家介绍ajax中怎么实现一个分页类，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

代码如下:

 
var paginationIndex = 0; 
var pagination = function(trTemplatId) { 
    $().ajaxStart(function() { 
        $.blockUI({ 
            message : '<table><tr><td ><font size=2pt>&nbsp;加载数据，请稍后...</font></td></tr></table>' 
        }); 
    }).ajaxStop($.unblockUI); 
    paginationIndex = paginationIndex + 1; 
    this.id = paginationIndex; 
    this.trTemplatId = trTemplatId; 
    this.pageNo = 1; 
    this.pageSize = 10; 
    this.beforeQuery = null; 
    this.afterQuery = null; 
    this.url = null; 
    this.params = null; 
    this.templat = null; 
    this.childrenCount = null; 
    this.setPageNo = function(pageNo) { 
        if (pageNo != null) 
            this.pageNo = pageNo; 
    } 
    this.setPageSize = function(pageSize) { 
        if (pageSize != null) 
            this.pageSize = pageSize; 
    } 
    this.setBeforeQuery = function(fn){ 
        this.beforeQuery = fn; 
    } 
    this.setAfterQuery = function(fn){ 
        this.afterQuery = fn; 
    } 
    this.load = function(url, params) { 
        //初始化(只在第一次查询时执行) 
        if(this.templat == null && this.childrenCount == null){ 
            var templatObj = $('#'+this.trTemplatId); 
            templatObj.parent().attr('id','tbody_id'+this.id); 
            templatObj.removeAttr('id'); 
            templatObj.wrap("<div id='divTemplat'></div>"); 
            this.templat = $('#divTemplat').html(); 
            $('#divTemplat').remove(); 
            this.childrenCount = $('#tbody_id'+this.id).children().size(); 
        } 
        //开始查询 
        this.url = url; 
        if(params == null) params = {}; 
        $.extend(params,{pageNo:this.pageNo,pageSize:this.pageSize}); 
        this.params = params; 
        var thisObj = this; 
        var options = { 
            url : url, 
            data : params, 
            async : false, //采用同步方式请求 
            type : 'POST', 
            dataType : 'JSON', 
            error : function(xmlHttp, errInfo, e) { //请求出错处理:如:404等 
                if (xmlhttp.status == 200) alert('您已经很长时间没有访问网站,请退出后重新登陆！'); 
                else alert('请求后台服务时发生错误：' + xmlhttp.status); 
            }, 
            success : function(data){ 
                //删除上一次的数据 
                $('#tbody_id'+thisObj.id).children().filter(':gt('+(thisObj.childrenCount-1)+')').remove(); 
                thisObj.pageList(data.data); 
                thisObj.pageBar(data.total); 
                if($.isFunction(thisObj.afterQuery)) thisObj.afterQuery(); 
            } 
        }; 
        if($.isFunction(this.beforeQuery)) this.beforeQuery(); 
        $.ajax(options); //发送请求 
    } 
    this.pageList = function(data){ 
        var filedArr = this.templat.match(/\{[A-Za-z0-9_]+\}/ig); 
        for(var i = 0;i < data.length;i++){ 
            var thisTemplat = this.templat; 
            for(var j = 0;j < filedArr.length;j++){ 
                var key = filedArr[j].substring(1,filedArr[j].length-1); 
                if(key == 'NO_'){ //序号标识 
                    var value = (this.pageNo-1)*this.pageSize + i + 1; 
                    thisTemplat = thisTemplat.replace(new RegExp('\{'+key+'\}','gm'),value); 
                }else{ 
                    var value = data[i][key]; 
                    if(typeof(value) != "undefined" && value == null) value = ''; 
                    thisTemplat = thisTemplat.replace(new RegExp('\{'+key+'\}','gm'),value); 
                } 
            } 
            $(thisTemplat).appendTo($('#tbody_id'+this.id)); 
        } 
    } 
    this.pageBar = function(total){ 
        var templatObj = $(this.templat); 
        var delChildren = templatObj.children(':gt(0)'); 
        delChildren.remove(); 
        templatObj.children().attr('colspan',$(this.templat).children().size()); 
        templatObj.children().attr('align','right'); 
        var pageCount; 
        if(total % this.pageSize == 0) pageCount = total/this.pageSize; 
        else pageCount = parseInt(total/this.pageSize) + 1; 
        if(pageCount == 0) pageCount = 1; 
        var toolbar = "第"+this.pageNo+"/"+pageCount+"页("+total+"条记录)"; 
        if(this.pageNo == 1) toolbar = toolbar + "&nbsp;首页&nbsp;上页"; 
        else toolbar = toolbar + "&nbsp;<a href='' id='firstPage"+this.id+"'>首页</a>&nbsp;<a href='' id='prePage"+this.id+"'>上页</a>"; 
        if(this.pageNo == pageCount) toolbar = toolbar + "&nbsp;下页&nbsp;末页"; 
        else toolbar = toolbar + "&nbsp;<a href='' id='nextPage"+this.id+"'>下页</a>&nbsp;<a href='' id='lastPage"+this.id+"'>末页</a>"; 
        toolbar = toolbar + "&nbsp;每页<input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pageSize"+this.id+"' value="+this.pageSize+" />条"; 
        toolbar = toolbar + "&nbsp;<input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pageNo"+this.id+"' value="+this.pageNo+" />"; 
        toolbar = toolbar + "&nbsp;<input style='height:20px;border:1 solid black' id='GoPage"+this.id+"' type='button' value='GO'>"; 
        templatObj.children().html(toolbar); 
        $(templatObj.wrap("<div></div>").parent().html()).appendTo($('#tbody_id'+this.id)); 
        var thisObj = this; 
        $('#firstPage'+thisObj.id).click(function(){ 
            thisObj.pageNo = 1; 
            thisObj.load(thisObj.url,thisObj.params); 
            return false; 
        }); 
        $('#prePage'+thisObj.id).click(function(){ 
            thisObj.pageNo = parseInt(thisObj.pageNo) - 1; 
            thisObj.load(thisObj.url,thisObj.params); 
            return false; 
        }); 
        $('#nextPage'+thisObj.id).click(function(){ 
            thisObj.pageNo = parseInt(thisObj.pageNo) + 1; 
            thisObj.load(thisObj.url,thisObj.params); 
            return false; 
        }); 
        $('#lastPage'+thisObj.id).click(function(){ 
            thisObj.pageNo = pageCount; 
            thisObj.load(thisObj.url,thisObj.params); 
            return false; 
        }); 
        $('#pageSize'+thisObj.id).keydown(function(e){ 
            if(e.keyCode==13) { 
                var v = $('#pageSize'+thisObj.id).val(); 
                if(!isIntGreatZero(v) || v == '0'){ 
                    alert('您输入显示条数不合法,请重新输入!'); 
                    $("#pageSize"+thisObj.id).focus(); 
                    return; 
                } 
                if(v > 200){ 
                    alert('您输入显示条数过大了,请重新输入!'); 
                    $("#pageSize"+thisObj.id).focus(); 
                    return; 
                } 
                thisObj.pageNo = 1; 
                thisObj.pageSize = v; 
                thisObj.load(thisObj.url,thisObj.params); 
            } 
        }); 
        $('#pageNo'+thisObj.id).keydown(function(e){ 
            if(e.keyCode==13) { 
                $('#goPage'+thisObj.id).triggerHandler('click'); 
            } 
        }); 
        $('#goPage'+thisObj.id).click(function(){ 
         var v = $('#pageNo'+thisObj.id).val(); 
            if(!isIntGreatZero(v) || v == '0'){ 
                alert('您输入页数不合法,请重新输入!'); 
                $("#pageNo"+thisObj.id).focus(); 
                return; 
            } 
         if(v > pageCount){ 
                alert('您输入页数大于总页数,请重新输入!'); 
                $("#pageNo"+thisObj.id).focus(); 
                return; 
            } 
            thisObj.pageNo = v; 
            thisObj.load(thisObj.url,thisObj.params); 
        }); 
    } 
} 
//true if the string is empty 
var isEmpty = function(text) { 
    var isEmpty = true; 
    for (var i = 0; i < text.length; i++) { 
        if (text.charAt(i) != ' ') { 
            isEmpty = false; 
            break; 
        } 
    } 
    return isEmpty; 
} 
//true if the string is int and great than zero or equals zero 
var isIntGreatZero = function(str) { 
    if (isEmpty(str)) 
        return false; 
    var temp1 = true; 
    var temp2 = '0123456789'; 
    for (var i = 0; i < str.length; i++) { 
        var c = str.charAt(i); 
        if (temp2.indexOf(c) == -1) { 
            temp1 = false; 
            break; 
        } else { 
            if (c == '0' && i == 0 && str.length > 1) { 
                temp1 = false; 
                break; 
            } 
        } 
    } 
    return temp1; 
}

关于AJAX中怎么实现一个分页类就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。