الحفاظ على عامل التصفية

جزء من قسم واجهات العرض المعتمدة على الأصناف في رحلة Django على Coddy. الدرس 9 من 18.

افتح وظائف برلين واضغط على التالي: تعرض الصفحة 2 وظائف من كل مدينة. الرابط هو ?page=2، وهو سلسلة استعلام جديدة بالكامل، لذا اختفى city=Berlin.

تبدأ العلامة {% querystring %} من سلسلة الاستعلام الحالية، وتعيّن القيم التي تحددها، ثم تكتب النتيجة، بما في ذلك ?. وهي مضمنة منذ Django 5.1، لذا لا تحتاج إلى {% load %}. ترتبط قائمة وصفات مُصفّاة حسب المطبخ بعرض مرتّب:

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

في /recipes/?cuisine=thai، تكتب ?cuisine=thai&sort=minutes: يظل عامل التصفية كما هو. يمكن أن تكون القيمة متغيرًا في القالب، كما أن None يحذف مفتاحًا: يؤدي {% querystring sort="minutes" page=None %} أيضًا إلى الرجوع إلى الصفحة 1.

لا تكتب ? قبل العلامة، وإلا فسيبدأ الرابط بـ ??.

التحدي

سهل

في job_list.html، اجعل رابطَي ترقيم الصفحات كليهما يحتفظان ببقية سلسلة الاستعلام. في /jobs/?city=Berlin، ينقلك «التالي» إلى ?city=Berlin&page=2، ويحتفظ «السابق» بالمدينة أيضًا. في /jobs/، يظل «التالي» ينقلك إلى ?page=2.

انقر على Berlin، ثم «التالي»: تعرض الصفحة 2 وظائف Berlin فقط.

جرّب بنفسك

{% 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 %}