Django分页器切换页面时GET过滤参数丢失问题求助

问题描述 #

实现按按钮过滤Manga对象后分页展示，第一页过滤功能正常，但切换到第二页时，GET请求中的category过滤参数丢失，导致分页后无法维持过滤状态。

现有视图代码 #

def Archive(request):
    filte = request.GET.get("category")
    manga = Manga.objects.all()
    if filte != None:
        manga = manga.filter(manga_categorys=filte)

    cats = Categorys.objects.all()
    paginator = Paginator(manga, 20)
    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)
    manlen = len(manga)

    context = {
        "Category": cats,
        "Manga": page_obj,
        "MangaLen":manlen,
    }

    template = loader.get_template("Category.html")

    return HttpResponse(template.render(context, request))

过滤组件（表单版） #

<form method="GET">
    <div class="grid grid-cols-10 gap-6">
        {%for x in Category%}
            <button class="bgl text-center p-4" type="submit" value="{{x.id}}" name="category"><h2 class="M text-xl ">{{x.category_name}}</h2></button>
        {%endfor%}
    </div>
</form>

过滤组件（a标签版） #

{%for x in Category%}
    <a class="bgl text-center p-4" href="?category={{x.id}}"><h2 class="M text-xl ">{{x.category_name}}</h2></a>
{%endfor%}

分页组件 #

<div class="pagination mx-auto p-2 flex w-max mt-4 bgl roulnded-lg">
    <span class="step-links">
        {% if Manga.has_previous %}
            <a href="?page=1"> <div class="p-3 text-lg M w-max mx-auto  inline mx-2 border-r-2">&laquo;</div></a>
            <a href="?page={{ Manga.previous_page_number }}"><div class="p-3 text-lg M w-max mx-auto inline mx-2 border-r-2">Önceki</div></a>
        {% endif %}

        <span class="current text-lg   p-3 mx-2">
            {{ Manga.number }}
        </span>

        {% if Manga.has_next %}
            <a href="?page={{ Manga.next_page_number }}"><div class="p-3 text-lg M w-max mx-auto  inline mx-2 border-l-2">Sonraki</div></a>
            <a href="?page={{ Manga.paginator.num_pages }}"><div class="p-3 text-lg M  w-max mx-auto inline mx-2 border-l-2">&raquo;</div> </a>
        {% endif %}
    </span>
</div>

解决方案 #

核心问题：分页链接未携带当前的category过滤参数，GET请求支持同时传递多个参数，用&连接即可。

步骤1：在视图中传递当前过滤参数到模板 #

修改视图代码，将当前的category参数加入上下文，让模板能获取到该值：

def Archive(request):
    filte = request.GET.get("category")
    manga = Manga.objects.all()
    if filte != None:
        manga = manga.filter(manga_categorys=filte)

    cats = Categorys.objects.all()
    paginator = Paginator(manga, 20)
    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)
    manlen = len(manga)

    context = {
        "Category": cats,
        "Manga": page_obj,
        "MangaLen": manlen,
        "current_category": filte,  # 新增：将当前过滤类别传入模板
    }

    template = loader.get_template("Category.html")

    return HttpResponse(template.render(context, request))

步骤2：修改分页组件，拼接过滤参数 #

在分页的每个链接中，判断是否存在current_category，若存在则将其拼接到URL中，确保分页时保留过滤状态：

<div class="pagination mx-auto p-2 flex w-max mt-4 bgl roulnded-lg">
    <span class="step-links">
        {% if Manga.has_previous %}
            <a href="?{% if current_category %}category={{ current_category }}&{% endif %}page=1"> 
                <div class="p-3 text-lg M w-max mx-auto  inline mx-2 border-r-2">&laquo;</div>
            </a>
            <a href="?{% if current_category %}category={{ current_category }}&{% endif %}page={{ Manga.previous_page_number }}">
                <div class="p-3 text-lg M w-max mx-auto inline mx-2 border-r-2">Önceki</div>
            </a>
        {% endif %}

        <span class="current text-lg   p-3 mx-2">
            {{ Manga.number }}
        </span>

        {% if Manga.has_next %}
            <a href="?{% if current_category %}category={{ current_category }}&{% endif %}page={{ Manga.next_page_number }}">
                <div class="p-3 text-lg M w-max mx-auto  inline mx-2 border-l-2">Sonraki</div>
            </a>
            <a href="?{% if current_category %}category={{ current_category }}&{% endif %}page={{ Manga.paginator.num_pages }}">
                <div class="p-3 text-lg M  w-max mx-auto inline mx-2 border-l-2">&raquo;</div> 
            </a>
        {% endif %}
    </span>
</div>

可选优化：标记当前选中的过滤类别 #

如果使用a标签版的过滤组件，可以给当前选中的类别添加高亮样式，提升用户体验：

{% for x in Category %}
    <a class="bgl text-center p-4 {% if current_category == x.id|stringformat:'i' %}bg-gray-200{% endif %}" href="?category={{ x.id }}">
        <h2 class="M text-xl ">{{ x.category_name }}</h2>
    </a>
{% endfor %}

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