Django无尽的分页加载Scroll上的整个数据

Question

我正在尝试使用django-endless分页来对我的查询集进行分页。但是在滚动时它会加载完整的数据。实际上它必须按照滚动的方式加载查询集。我给了paginateOnScrollMargin的附加选项：20但它似乎无法发挥作用可能是什么问题？

这是无尽的剧本

<script type="text/javascript">
    function paginate(){
        $.endlessPaginate({
        paginateOnScroll: true,
        paginateOnScrollMargin : 20
    });
}
</script>

这是包含页面模板的模板

<div class="productgrid">
    {% if page_template %}

    {% include page_template %}

    {% endif %}
</div>

这是页面模板

{% load staticfiles %}
{% load endless %}
{% if queryset %}
{% paginate 4,4 queryset %}         
{% for product in queryset %}
                <div class="prodthumb">
                    <a href = '{{ product.get_absolute_url }}'>
                            {% if product.id in dictionary %}
                            <div class="like-icon" id="like-icon{{product.id}}" onclick="getLike(event, {{ product.id }} , 'True' )"><img src="{% static 'images/wished.png'%}" height="25px"></div>
                            {% else %}
                            <div class="like-icon" id="like-icon{{product.id}}" onclick="getLike(event, {{ product.id }} , 'True' )"><img src="{% static 'images/wish.png'%}" height="25px"></div>
                            {% endif %}
                            <div class="likenotif" id="likenotif{{product.id}}">Please Sign In</div>
                            <div class="prodimg">
                                <img src="{{ product.get_image_url }}" height="350px">
                            </div>
                        <div class="quickview">
                            <a href="#qwmodal{{product.id}}" data-toggle="modal" onclick="sendProduct(event, {{ product.id }})">QUICK VIEW</a>
                        </div>
                        <div class="proddetails">
                            <div class="prodtitle"> {{ product.brand }} {{ product.title }}</div>
                            <div class="prodprice">
                            {% if product.discount %}
                                <div class="totalprice">
                                Rs. {{ product.get_sales_price }}
                                </div>
                                <div class="discprice">Rs. {{ product.price }}</div>
                                <div class="disc">{{ product.discount }}%</div>
                                {% else %}
                                <div class="totalprice">
                                Rs. {{ product.price }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </a>

                    <div id="qwmodal{{product.id}}" class="modal fade" role="dialog">
                        <div class="modal-dialog">

                            <!-- Modal content-->
                            <div class="modal-content" style="width:900px; height:550px;background-color: white;border-radius: 0px;text-align:center;margin-top:10%; margin-left:-22%">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="   Close" style="width:0px; opacity: 0.6; color:black!important; margin-top: 3px; margin-right: 24px;">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                  </div>
                                    <div class="leftpart">
                                        <div id="main" role="main">
                                          <section class="slider">
                                            <div class="flexslider">
                                              <ul class="slides">
                                                    {% for image in product.productimage_set.all %}
                                                    <li>
                                                    <img src="{{ image.image.url }}" height="100%"/>
                                                    </li>
                                                    {% endfor %}
                                                </ul>
                                            </div>
                                          </section>
                                        </div>
                                    </div>

                        <div class="rightpart"> 

                        <div class="brandlogo">
                            {% for image in product.brand.brandimages.logo %}
                                 <img src="{{ image.image.url }}" height="40px" />
                            {% endfor %}
                        </div>  

                        <div class="prodtitle pull-left">{{ product.title }}</div>

                    <div class="price-mod pull-left">
                        <div class="pricebox" id="pricebox">
                        </div>
                    </div>
                <div class="size-mod">
                <span id="smgreytx" style="line-height: 2; float:left">SIZE</span>
                    <ul style="margin-left:50px">
                        <div id="sizes">
                        </div>
                        <div id="selectsize" style="display:none"><span>Please select Size</span></div>
                    </ul>
                </div>

                <div class="like">
                        <span type="submit" class="likealign" id="likebtn{{product.id}}" onclick="getLike(event, {{ product.id }} , 'True' )">
                        {% if product.id in dictionary %}
                        <img src="{% static 'images/wished.png'%}" height="30px" id="likeimg" class="pull-left"> Liked
                        {% else %}
                        <img src="{% static 'images/wish.png'%}" height="30px" id="likeimg" class="pull-left"> Like
                        {% endif %}
                        </span>
                        <div class="likenotifmod" id="likenotifmod{{product.id}}">Please Sign In</div>

                </div>
                <div id="soldby">
                </div>

                <div class="action">
                <div id="addbutton">
                <button class="button" type="Submit" id="addtocart" onclick="getCart(event, {{ minId }} )">ADD TO BAG</button>
                </div>
                <a href="{{ product.get_absolute_url }}"><button class="button" type="Submit">VIEW DETAILS</button></a>
                </div>
            </div>

            </div>
        </div>
    </div>  
</div>
{% endfor %}
{% endif %}
{% show_more "show more" %}

当滚动到达页面底部时，如何使无限分页加载数据？