Django - Anzeigen von Bildern in Vorlage mit for-Schleife

Question

Ich arbeite an einer Produktseite mit Django-Framework mit Bootstrap. Ich möchte Bilder in For-Schleife anzeigen.
Ich habe getan, dass for-Schleife und Bilder in der Reihenfolge angezeigt werden, aber ich wollte zuerst nur 20 Bilder anzeigen und dann nächste Schaltfläche verwenden, um mehr 10 Bilder und so weiter zu laden.
Kann es auf der gleichen Seite gemacht werden, d. H. Die gleiche URL.

<div class="div1" style="max-width: wrap content; height: 50em; padding-left: 7em;"> 

{% for p in product.types_set.all %} 

    {% if p.available == True %} 


    <div class="img" align="center" style=" float: left; width: 20em; height: 25em;"> 

     <img class="img-thumbnail" src="{{MEDIA_URL}}{{p.image.url}}" alt="image" style="width: 15em;"> 

    </div> 

     {% endif %} 
    {% endfor %} 

</div> 

Answer 1

Sie müssen Paginierung verwenden.

https://docs.djangoproject.com/en/1.9/topics/pagination/

Übergeben Sie das product.types_set.all() Objekt Paginator

def listing(request): 
    product = <get the product here> 
    types_set_list = product.types_set.all().objects.all() 
    paginator = Paginator(types_set_list, 20) # Show 20 contacts per page 

    page = request.GET.get('page') 
    try: 
     typesets = paginator.page(page) 
    except PageNotAnInteger: 
     # If page is not an integer, deliver first page. 
     typesets = paginator.page(1) 
    except EmptyPage: 
     # If page is out of range (e.g. 9999), deliver last page of results. 
     typesets = paginator.page(paginator.num_pages) 

    return render(request, 'list.html', {'typesets': typesets}) 

Und in list.html

<div class="div1" style="max-width: wrap content; height: 50em; padding-left: 7em;"> 

{% for p in typesets.all %} 
    {% if p.available == True %} 
    <div class="img" align="center" style=" float: left; width: 20em; height: 25em;"> 
     <img class="img-thumbnail" src="{{MEDIA_URL}}{{p.image.url}}" alt="image" style="width: 15em;"> 
    </div> 
    {% endif %} 
{% endfor %} 
</div> 
<div class="pagination"> 
    <span class="step-links"> 
     {% if typesets.has_previous %} 
      <a href="?page={{ typesets.previous_page_number }}">previous</a> 
     {% endif %} 

     <span class="current"> 
      Page {{ contacts.number }} of {{ typesets.paginator.num_pages }}. 
     </span> 

     {% if typesets.has_next %} 
      <a href="?page={{ typesets.next_page_number }}">next</a> 
     {% endif %} 
    </span> 
</div>