如何在Django中使用if和for循环实现分页功能

问题排查 #

1. 第二页模板中使用的forloop.counter2不是Django模板的合法内置变量，Django For循环内置计数器只有forloop.counter（从1开始计数）、forloop.counter0（从0开始计数）等，没有counter2属性，所以你的判断条件永远不成立，自然没有内容渲染。
2. 你当前用前端循环+条件判断截取内容的方式本质上不是分页，后端还是查询了全量的文章数据传递给模板，不仅无法实现“第二页展示第一页之后的内容”的需求，数据量较大时还会严重拖慢性能。
3. 拆分首页、第二页两个独立模板的实现方式冗余，后期维护成本很高。

正确实现方案 #

Django自带了开箱即用的分页组件Paginator，直接按以下步骤改造即可：

第一步：后端视图改造 #

在你的视图文件（一般为views.py）中引入分页组件，处理分页逻辑：

from django.core.paginator import Paginator
from .models import Post # 替换为你自己的文章模型名

def post_list(request):
    # 查询所有文章，按发布时间倒序排列
    all_posts = Post.objects.all().order_by('-date_added')
    # 配置分页规则，这里设置每页展示10条内容，可根据需求调整
    paginator = Paginator(all_posts, 10)
    # 获取当前请求的页码
    page_num = request.GET.get('page')
    # 获取对应页的内容对象
    page_obj = paginator.get_page(page_num)
    
    # 将分页对象传递给模板，不需要再传全量的posts
    return render(request, '你的模板路径/list.html', {'page_obj': page_obj})

第二步：模板改造 #

不需要拆分两个模板，同一套模板即可适配所有分页场景，模板代码如下：

{% 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">
  {% if page_obj.has_previous %}
    <a href="?page=1">&laquo; 第一页</a>
    <a href="?page={{ page_obj.previous_page_number }}">上一页</a>
  {% endif %}

  <span>
    第 {{ page_obj.number }} 页 / 共 {{ page_obj.paginator.num_pages }} 页
  </span>

  {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}">下一页</a>
    <a href="?page={{ page_obj.paginator.num_pages }}">最后一页 &raquo;</a>
  {% endif %}
</div>

改造完成后访问你的页面地址?page=1就是第一页，?page=2就是第二页，以此类推，自动适配页码。

内容的提问来源于stack exchange，提问作者7mood