如何在 django 应用程序中加载更多内容？

Question

我已经开发了用于在我的 django 应用程序中查看组列表的模板。我知道的是，在更多组之后，页面正在向下滚动。我无法看到所有组的名称。而且我想在开始时只查看 4 个组名，然后单击加载更多按钮后，必须显示接下来的 4 个组。我无法做到这一点。

    {% extends "groups/group_base.html" %}
{% block pregroup %}
<div class="col-md-4">
    <div class="content">
        {% if user.is_authenticated %}
        <h2>
            Welcome back
            <a href="{% url 'posts:for_user' username=user.username %}">@{{user.username }}</a>
        </h2>

    {% endif %}
            <h2>Groups</h2>

            <p>Welcome to the Groups Page! Select a Group with a shared interest!</p>
    </div>
    {% if user.is_authenticated %}
    <a href="{% url 'groups:create' %}" class="btn btn-md btn-fill btn-warning"><span class="glyphicon glyphicon-plus-sign"></span> Create New Group!</a>
    {% endif %}
</div>
{% endblock %}

{% block group_content %}
<div class="col-md-8">
    <div class="list-group">
        {% for group in object_list %}
          <a class="list-group-item" href="{% url 'groups:single' slug=group.slug %}">
                 <h3 class="title list-group-item-heading">{{ group.name }}</h3>
            <div class="list-group-item-text container-fluid">
                {{ group.description_html|safe }}
                <div class="row">
                    <div class="col-md-4">
                        <span class="badge">{{ group.members.count }}</span> member{{ group.members.count|pluralize }}
                    </div>
                    <div class="col-md-4">
                        <span class="badge">{{ group.posts.count }}</span> post{{ group.posts.count|pluralize }}
                    </div>
                </div>
            </div>
        </a>
        {% endfor %}

                    </div>

</div>
{% endblock %}

我想在这个页面上添加滚动选项。怎么做？分页可能是一个解决方案。但我想在同一页面上加载列表。

Answer 1

1.将 object_list 解析为 JSON 对象：这应该允许您向客户端提供所有存在的组，以实现将用户保持在同一页面上的目标。

2.使用 jQuery 或 Javascript 刷新列出了组的 html 容器： 根据数据的大小和类型，您还可以编写一个新视图，将过滤的 JSON 对象返回到 Javascript 中的 post 方法。 p>

示例：https://codepen.io/elmahdim/pen/sGkvH

    /*
     Load more content with jQuery - May 21, 2013
    (c) 2013 @ElmahdiMahmoud
    */   

$(function () {
    $("div").slice(0, 4).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 4).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

$('a[href=#top]').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});