善忘技术夹 Logo
善忘技术夹
技术文章 · 2044 阅读

jQuery插件滚动加载更多jqueryscrollpagination

插件下载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;
    });
};