jQuery插件滚动加载更多jqueryscrollpagination

  |   0 评论   |   1,469 浏览

    插件下载github路径:https://github.com/andferminiano/jquery-scroll-pagination

     QQ截图20141206210447
    今天使用这个插件,主要是用来滚动加载更多产品列表信息。但是发现有个地方,就是后台传值的功能。如果默认按照样例里面的方法传值的话,ajax调用的参数,url,data参数是初始化设置的, 对于获取翻页参数动态传值不方便。如下图:

     Image1

    所以进行了修改,添加了一个传参数的方法,方便调用 ,动态传参数进去,如下图

    c294cd80-7897-48f4-aa3c-8ebba7131445

    添加代码:
    var parm = opts.contentData;
    if (opts.parm != null){
        parm = opts.parm();
    }
    对应ajax方法中,data参数修改成 data:parm, 这样就行了。前面调用的方法和demo中的调用方法一样。
    以下是我调用的代码,加粗的地方属于自己新增的代码
    $('.pro_list').scrollPagination({
        'contentPage': "/prodetailsmore", 
        'contentData':$("#proform").serialize(),
        'scrollTarget': $(window), 
        'heightOffset': 10, 
        'beforeLoad': function(){ 
            $('#loading').fadeIn();
        },
        'parm': function(){
            return $("#proform").serialize();
        },
        'afterLoad': function(elementsLoaded){ 
            var result = $.parseJSON(elementsLoaded);
            $('#loading').fadeOut();
            $.each(result.list, function() {
                $(".pro_list").append('<li><div><a href="/prodetails?id='+this.id+'"><img src="'+this.listImgPath+'"></a></div>'+
                        '<a href="/prodetails?id='+this.id+'">'+this.productName+'<br> <span>型号:'+this.productType+
                    '</span> <br> '+this.orgName+'</a></li>');
            });
            $('#pageNo').val(result.pageNo + 1);
            $('#pageSize').val(result.pageSize);
            $(result.list).fadeInWithDelay();
             if (result.isend === 1){ 
                 $('#nomoreresults').fadeIn();  
                 $('.pro_list').stopScrollPagination();
             }
        }
    });
    

    // code for fade in element by element
    $.fn.fadeInWithDelay = function(){
    var delay = 0;
    return this.each(function(){
    $(this).delay(delay).animate({opacity:1}, 200);
    delay += 100;
    });
    };

    评论

    发表评论

    validate