• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    基于AJAX的分页类实现代码
    复制代码 代码如下:

    /**
    * 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>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;
    }
    您可能感兴趣的文章:
    • 用jQuery中的ajax分页实现代码
    • AJAX分页的代码(后台asp.net)
    • ajax实现无刷新分页(php)
    • 无框架 Ajax分页(原创)
    • ASP AJAX 静态分页
    • php ajax无刷新分页,支持id定位
    • asp+ajax实现静态页面分页的代码
    • Ajax PHP分页演示
    • AJAX和三层架构实现分页功能具体思路及代码
    上一篇:ajax 入门基础之 XMLHttpRequest对象总结
    下一篇:AJAX 客户端响应速度提高分析
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    基于AJAX的分页类实现代码 基于,AJAX,的,分页,类,实现,