基于AJAX的分页类实现代码

2016-02-19 11:01 3 1 收藏

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

【 tulaoshi.com - Web开发 】

代码如下:

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

来源:https://www.tulaoshi.com/n/20160219/1596356.html

延伸阅读
标签: Web开发
控件类代码: 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Reflection; using System.IO; [assembly: WebResource("PageBarJS.js", "application/x...
标签: Web开发
由于查询返回的数据量很大,超过10w条数据,因此需要对页面查询功能进行优化。放弃原有程序中使用DataGrid的做法,自己编写分页显示模块。     首先在页面上添加几个DIV:         div id="div_trackpoint" style=" border:solid 1px gray; height:230px; width:99%; overflow-y...
标签: Web开发
其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁!” 1. addClass() - 添加CSS类 代码如下: $("#target").addCl...
标签: Web开发
JS代码如下。 在调用Ajax返回后。一个奇怪的问题。返回的resultString值是“ok”但是跟字符串"ok"比较确不相等。 Ajax调用out.println()返回的都添加了哪些参数? 放开注释的部分也过滤不掉。 哪位高手遇到过类似的问题。 如何解决的。 请说一下。out.println();返回的到底是个啥。 Js代码 代码如下: // 本地下载 function FTPTest(...
标签: Web开发
一、表单部分 (index.html)     首先是表单填写页面,用一个ID为AutoSaveMsg的DIV来显示返回信息,并且用一个ID为Draft_AutoSave的CheckBox来确定是否进行自动保存,然后将Textarea的ID命名为message。同时为了应对多用户同时使用的需要,加上用户名,每个用户的草稿分开保存。为了说明方便,这里把一些修饰性的东西...

经验教程

126

收藏

46
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部