Django模板分页时如何正确显示父模型关联的所有内联字段

问题根因 #

两种异常实现的核心错误都是分页作用对象错误：

• 直接用ListView分页时拆分关联数据：本质是将连表后的扁平化联合结果作为分页查询集，1个父模型History对应N条GeoHazard、M条Assessment关联数据时，连表总结果数为N*M条，按单条切分页自然会把同属一个父实例的关联数据拆分到不同页面。
• 传全量关联数据不随分页匹配：直接将GeoHazard、Assessment全表数据传入上下文，模板渲染时未和当前页的父实例做绑定，无论切换到哪个父实例页面，都会渲染全量关联数据。

可直接落地的实现方案 #

核心逻辑：仅对父模型History做分页，关联数据通过预加载机制绑定到对应父实例，不参与分页逻辑。

1. 视图层配置（基于ListView） #

不需要重写get_context_data传全量数据，也不需要自定义标签手动过滤，通过prefetch_related预加载关联数据即可，预加载会自动把关联数据绑定到对应的History实例上，不会拆分分页，同时避免循环查库的N+1性能问题。

from django.views.generic import ListView
from django.db.models import Prefetch
from .models import History, GeoHazard, Assessment

class HistoryListView(ListView):
    model = History
    template_name = "history_list.html"
    paginate_by = 1  # 每页展示1个History父实例
    # 预加载关联数据，默认反向关联名为<模型名小写>_set，如果自定义了related_name替换成对应值即可
    queryset = History.objects.prefetch_related(
        "geohazard_set",
        "assessment_set"
    ).all()

    # 如果需要对关联数据做过滤、排序，用Prefetch自定义查询集即可
    # queryset = History.objects.prefetch_related(
    #     Prefetch("geohazard_set", queryset=GeoHazard.objects.filter(is_valid=True).order_by("-happen_time")),
    #     Prefetch("assessment_set", queryset=Assessment.objects.order_by("-risk_level"))
    # ).all()

2. 模板层渲染 #

不要直接遍历上下文中的全量GeoHazard、Assessment数据，直接遍历当前页面对应History实例的关联集合即可，关联数据是实例自带属性，分页切换时自动匹配当前父实例的关联内容，不会串数据。

<!-- 遍历分页后的父实例 -->
{% for history in page_obj %}
<div class="history-card">
    <h3>历史记录ID：{{ history.id }}</h3>
    <!-- 此处按需渲染History自身字段，例：<p>记录时间：{{ history.record_time }}</p> -->

    <div class="geohazard-section">
        <h4>关联地质灾害信息</h4>
        <table>
            <thead>
                <tr><th>灾害点位</th><th>灾害类型</th><th>风险等级</th></tr>
            </thead>
            <tbody>
                {% for geo in history.geohazard_set.all %}
                <tr>
                    <td>{{ geo.point_name }}</td>
                    <td>{{ geo.hazard_type }}</td>
                    <td>{{ geo.risk_level }}</td>
                </tr>
                {% empty %}
                <tr><td colspan="3">暂无关联地质灾害数据</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="assessment-section">
        <h4>关联评估信息</h4>
        <table>
            <thead>
                <tr><th>评估人</th><th>评估时间</th><th>评估结论</th></tr>
            </thead>
            <tbody>
                {% for assess in history.assessment_set.all %}
                <tr>
                    <td>{{ assess.operator }}</td>
                    <td>{{ assess.assess_time }}</td>
                    <td>{{ assess.conclusion }}</td>
                </tr>
                {% empty %}
                <tr><td colspan="3">暂无关联评估数据</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endfor %}

<!-- 分页导航，和普通ListView分页写法完全一致 -->
<div class="pagination-wrap">
    {% if page_obj.has_previous %}
        <a href="?page=1">首页</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 }}">末页</a>
    {% endif %}
</div>

注意事项 #

• 如果GeoHazard、Assessment模型关联History的外键字段设置了自定义related_name，把代码里的geohazard_set、assessment_set替换为你设置的related_name值即可。
• 不要用select_related加载这两个关联模型，select_related仅适用于一对一、多对一的正向关联，反向一对多关联用prefetch_related才会正确预加载，不会出现连表拆页的问题。
• 不需要额外写自定义模板标签做过滤，也不需要在get_context_data里循环当前页的history_id手动查询关联数据，prefetch_related会自动批量查询当前页所有父实例对应的关联数据，查询效率远高于循环单查。

内容的提问来源于stack exchange，提问作者Captain Dawn