解决搜索条件在分页时丢失的问题
解决搜索条件在分页时丢失的问题
在上一节中，我们已经为学生列表页实现了搜索功能。 但在实际使用过程中，很快就会发现一个非常典型、也非常隐蔽的问题。
1.问题复现：分页后搜索条件丢失
假设我们执行以下操作：
选择 1年1班，点击「搜索」，列表正确显示了一年一班的学生，如下图所示：
然后点击「下一页」，此时观察浏览器地址栏，会发现 URL 发生了变化，例如：
/students/?page=2
问题来了：
- 原本的
grade=1、search=xxx参数消失了 - 第二页展示的，变成了 所有学生的数据
- 搜索条件完全失效
这显然是一个 Bug。
我们真正期望的行为是：
👉 1年1班的第 2 页结果，而不是全部学生的第 2 页
2.问题的本质原因
问题并不在查询逻辑，而在 分页链接的生成方式。
在模板中，分页链接通常是类似这样的写法：
<!-- 分页导航 -->
<div class="pagination">
{% if page_obj.has_previous %}
<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>
{% endif %}
</div>
这种写法有一个致命缺陷：
它会覆盖原有的所有查询参数，只保留
page
也就是说：
- 原有的
grade - 原有的
search
都会被直接忽略。
3.常见解决方案 & 为什么不用 JS
当然，这个问题完全可以用 JavaScript 来解决：
- 点击分页时，手动拼接当前 URL 参数
- 在原有参数后追加
page=2
但问题是：
- 实现成本高
- 可读性差
- 对 Django 模板不友好
- 对不熟悉 JS 的同学不友好
那么，有没有一种 纯 Django、可复用、模板级别的解决方案？
答案是：有的。
继续阅读完整内容
以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。
查看课程详情