jQuery插件滚动加载更多jqueryscrollpagination

2014-12-07 | 0 评论 | 1,598 浏览

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

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

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

添加代码：

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;

});

};

发表评论