欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于AJAX的分页类实现代码

程序员文章站 2022-06-24 16:17:57
复制代码 代码如下:/** *

pagination.js *

通用的基于ajax的分页类 * @author jeanwendy *...

复制代码 代码如下:

/**
* <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;
}