Question

我正在使用带有引导程序的django框架在产品站点上工作。我想在for循环中显示图像我已经完成了使用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>

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

1 个答案: