Wie lade ich mehr Inhalte in der Django-Anwendung?

Question

Ich habe eine Vorlage zum Anzeigen der Gruppenliste in meiner Django-Anwendung entwickelt. Was ich erfahren habe, ist, dass nach weiteren Gruppen die Seite nach unten scrollt. Ich kann nicht alle Namen der Gruppen sehen. Und außerdem möchte ich beim Start nur 4 Gruppennamen sehen und nach dem Klick auf die Schaltfläche "Mehr laden" müssen die nächsten 4 Gruppen angezeigt werden. Ich kann das nicht machen.

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

Ich möchte auf dieser Seite eine Bildlaufoption hinzufügen. Wie geht das? Paginierung könnte eine Lösung sein. Aber ich möchte Liste auf der gleichen Seite selbst laden.

Answer 1

1. Analysieren Sie die object_list in ein JSON-Objekt: Dies sollte Ihnen ermöglichen, dem Client alle vorhandenen Gruppen zur Verfügung zu stellen, um Ihr Ziel zu erreichen, den Benutzer auf derselben Seite zu halten.

2. Verwenden Sie jQuery oder Javascript Ihre HTML-Container zu aktualisieren, die die Gruppen aufgeführt hat: Basierend auf der Größe und der Art der Daten, können Sie auch eine neue Ansicht schreiben, die auf einen Beitrag eines gefilterten JSON-Objekt zurückgibt Methode in Javascript.

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