Как создать пагинацию с помощью if и for цикла django

Я пытался сделать пагинацию с помощью for и if и это не сработало. Так как же мне это сделать

?

это изображение, которое может показать вам изображение первой страницы

изображение страницы 2

код первой страницы

  {% for post in posts %}
  {% if forloop.counter <= 2 %}
    <div style="background-color: #9999;" class="card mb-3" style="max-width: 100%;">
      <div class="row no-gutters">
        <div class="col-md-4">
          <a href="{% url 'post_detail' post.slug %}"><img style="height: 200px; width: 330px;" src="{{ post.mainimage.url }}" class="card-img" alt="..."></a>
        </div>
        <div class="col-md-6" id="ph">
          <div class="card-body">
            <h5 class="card-title">{{ post.title }} , {{ post.xnumber }}</h5>
            <p class="card-text">{{ post.version }}</p>
            <p>{{ post.category }}</p>
            <p class="card-text"><small class="text-muted">{{ post.date_added }}</small></p>
          </div>
        </div>
      </div>
    </div>
  <hr >
  {% endif %}
  {% empty %}
  <div class="notification">
      <p>No posts yet!</p>
  </div>
    {% endfor %}

код страницы 2

  {% for post in posts %}
  {% if forloop.counter2 <= 30 %}
    <div style="background-color: #9999;" class="card mb-3" style="max-width: 100%;">
      <div class="row no-gutters">
        <div class="col-md-4">
          <a href="{% url 'post_detail' post.slug %}"><img style="height: 200px; width: 330px;" src="{{ post.mainimage.url }}" class="card-img" alt="..."></a>
        </div>
        <div class="col-md-6" id="ph">
          <div class="card-body">
            <h5 class="card-title">{{ post.title }} , {{ post.xnumber }}</h5>
            <p class="card-text">{{ post.version }}</p>
            <p>{{ post.category }}</p>
            <p class="card-text"><small class="text-muted">{{ post.date_added }}</small></p>
          </div>
        </div>
      </div>
    </div>
  <hr >
  
  {% endif %}
  {% empty %}
      <div class="notification">
          <p>No posts yet!</p>
      </div>
    {% endfor %}

так что прошу помощи я сделал это, но теперь все работает, ни один пост не отображается на странице 2

Вот как вы можете подойти к этому, используя класс Paginator, предоставляемый Django.

from django.core.paginator import Paginator
from django.shortcuts import render

from yourApp.models import Post

def frontpage(request): 
    posts = Post.objects.all() 
        
    paginator = Paginator(posts, 3) # Show 3 posts per page or 10 to show 10 posts.
    
    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)

    return render(request, 'posts/frontpage.html', {'page_obj': page_obj})

Теперь в html-странице frontedend достаточно внести это небольшое изменение, и ваш html-код будет выглядеть следующим образом

 {% for post in page_obj %}
    <div style="background-color: #9999;" class="card mb-3" style="max-width: 100%;">
      <div class="row no-gutters">
        <div class="col-md-4">
          <a href="{% url 'post_detail' post.slug %}"><img style="height: 200px; width: 330px;" src="{{ post.mainimage.url }}" class="card-img" alt="..."></a>
        </div>
        <div class="col-md-6" id="ph">
          <div class="card-body">
            <h5 class="card-title">{{ post.title }} , {{ post.xnumber }}</h5>
            <p class="card-text">{{ post.version }}</p>
            <p>{{ post.category }}</p>
            <p class="card-text"><small class="text-muted">{{ post.date_added }}</small></p>
          </div>
        </div>
      </div>
    </div>
  <hr >

  {% empty %}
  <div class="notification">
      <p>No posts yet!</p>
  </div>
{% endfor %} 

<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; first</a>
            <a href="?page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

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

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
        {% endif %}
    </span>
</div>

Теперь остается только стилизовать div пагинации. Надеюсь, это решит вашу проблему с пагинацией. Спасибо

Вернуться на верх