javascript - ¿Cómo cargar más contenido en una aplicación Django?

He desarrollado una plantilla para ver la lista de grupos en mi aplicación Django. Lo que descubrí es que, después de agregar más grupos, la página se desplaza hacia abajo. No puedo ver todos los nombres de los grupos. Además, quiero ver solo 4 nombres de grupos al inicio y luego, al hacer clic en el botón de cargar más, aparecen los siguientes 4 grupos. No puedo hacer esto.

    {% 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 %}

Quiero agregar una opción de desplazamiento a esta página. ¿Cómo hacer eso? La paginación podría ser una solución. Pero quiero cargar la lista en la misma página.

Respuesta #1

1. Analiza el object_list en un objeto JSON: Esto debería permitirte proporcionar al cliente todos los grupos que existen para lograr tu objetivo de mantener al usuario en la misma página.

2. Usa jQuery o Javascript para actualizar tu contenedor HTML que tiene los grupos listados: Dependiendo del tamaño y tipo de datos, también puedes escribir una nueva vista que devuelva un objeto JSON filtrado a un método post en Javascript.

Ejemplo: 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();
    }
});