Django - 使用for循環在模板中顯示圖像

Question

我正在使用django框架和bootstrap在產品網站上工作。我想在for循環中顯示圖像。
我已經完成了使用循環和圖片顯示的順序 ，但我想先顯示20個圖像，然後使用下一個按鈕來加載更多10個圖像等等。
它可以在同一頁面上完成，即相同的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

您需要使用分頁。

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

傳遞product.types_set.all()對象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}) 

而且在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>