当前位置: 移动技术网 > IT编程>脚本编程>Ajax > 基于AJAX的分页类实现代码

基于AJAX的分页类实现代码

2017年12月12日  | 移动技术网IT编程  | 我要评论
复制代码 代码如下:

/**
* <p>pagination.js
* <p>通用的基于ajax的分页类
* @author jeanwendy
* @version 1.0
*/
var paginationindex = 0;
var pagination = function(trtemplatid) {
    $().ajaxstart(function() {
        $.blockui({
            message : '<table><tr><td style="vertical-align :bottom"><font size=2pt> 加载数据,请稍后...</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 + " 首页 上页";
        else toolbar = toolbar + " <a href='' id='firstpage"+this.id+"'>首页</a> <a href='' id='prepage"+this.id+"'>上页</a>";
        if(this.pageno == pagecount) toolbar = toolbar + " 下页 末页";
        else toolbar = toolbar + " <a href='' id='nextpage"+this.id+"'>下页</a> <a href='' id='lastpage"+this.id+"'>末页</a>";
        toolbar = toolbar + " 每页<input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pagesize"+this.id+"' value="+this.pagesize+" />条";
        toolbar = toolbar + " <input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pageno"+this.id+"' value="+this.pageno+" />";
        toolbar = toolbar + " <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;
}

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网