Giữ bộ lọc

Thuộc phần View dựa trên lớp trong hành trình Django của Coddy. Bài học 9 trên 18.

Mở danh sách việc làm ở Berlin rồi nhấn Tiếp theo: trang 2 liệt kê việc làm ở mọi thành phố. Liên kết là ?page=2, một chuỗi truy vấn hoàn toàn mới, nên city=Berlin biến mất.

Thẻ {% querystring %} bắt đầu từ chuỗi truy vấn hiện tại, đặt các giá trị bạn nêu rồi ghi kết quả, bao gồm cả ?. Thẻ này được tích hợp sẵn từ Django 5.1, nên không cần {% load %}. Danh sách công thức được lọc theo món ăn sẽ liên kết đến chế độ xem đã sắp xếp:

<a href="{% querystring sort="minutes" %}">Quickest first</a>

Với /recipes/?cuisine=thai, thẻ ghi ?cuisine=thai&sort=minutes: bộ lọc vẫn được giữ lại. Giá trị có thể là một biến mẫu, còn None sẽ xóa một khóa: {% querystring sort="minutes" page=None %} cũng quay lại trang 1.

Đừng viết ? trước thẻ, nếu không liên kết sẽ bắt đầu bằng ??.

Thử thách

Dễ

Trong job_list.html, hãy giữ nguyên phần còn lại của chuỗi truy vấn trong cả hai liên kết phân trang. Tại /jobs/?city=Berlin, Next dẫn đến ?city=Berlin&page=2, còn Previous cũng giữ lại thành phố. Tại /jobs/, Next vẫn dẫn đến ?page=2.

Nhấp vào Berlin, rồi nhấp vào Next: trang 2 chỉ liệt kê các việc làm ở Berlin.

Tự làm thử

{% extends "jobs/base.html" %}

{% block title %}Jobs{% endblock %}

{% block content %}
  <h1>Jobs</h1>
  <p class="cities">
    <a href="{% url 'jobs:list' %}">All cities</a>
    <a href="?city=Berlin">Berlin</a>
    <a href="?city=Lisbon">Lisbon</a>
    <a href="?city=London">London</a>
  </p>
  <ul class="jobs">
    {% for job in jobs %}
      <li class="job">
        <a href="{% url 'jobs:detail' job.slug %}"><strong>{{ job.title }}</strong></a>
        at {{ job.company }}, {{ job.city }}
      </li>
    {% empty %}
      <li>No jobs yet.</li>
    {% endfor %}
  </ul>

  {% if is_paginated %}
    <nav class="pages">
      {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}">Previous</a>
      {% endif %}
      <span>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>
      {% endif %}
    </nav>
  {% endif %}
{% endblock %}