Python Django-使用for循环在模板中显示图像

我正在一个使用django框架和引导的产品站点上工作。我想在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>

{product.types_set.all%}
{%如果p.available==True%}
{%endif%}
{%endfor%}

您需要使用分页

将

product.types\u 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})

---

可以，但它与django无关，因为它发生在客户端。

<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>