基于AJAX的分页类实现代码

吾辈大叔控

吾辈大叔控

2016-02-19 11:01

下面请跟着图老师小编一起来了解下基于AJAX的分页类实现代码,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!
代码如下:

/**
* ppagination.js
* p通用的基于AJAX的分页类
* @author jeanwendy
* @version 1.0
*/
var paginationIndex = 0;
var pagination = function(trTemplatId) {
    $().ajaxStart(function() {
        $.blockUI({
            message : 'tabletrtd 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;
}
展开更多 50%)
分享

猜你喜欢

基于AJAX的分页类实现代码

Web开发
基于AJAX的分页类实现代码

javascript Ajax 类实现代码

Web开发
javascript Ajax 类实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Jquery Ajax.ashx 高效分页实现代码

Web开发
Jquery Ajax.ashx 高效分页实现代码

jquery 分页控件实现代码

Web开发
jquery 分页控件实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax 表单验证 实现代码

Web开发
Ajax 表单验证 实现代码

AJAX 进度条实现代码

Web开发
AJAX 进度条实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

小图片在PPT中的应用

小图片在PPT中的应用

ajax session过期问题的几个解决方案

ajax session过期问题的几个解决方案
下拉加载更多内容 ↓