Pagination ⋮ Sorting ⋮ Sessions

views.py

Import:

from django.core.paginator import Paginator

Selected view:

...

if 'reset' in request.GET:
    request.session.pop('current_sort', None)
    return redirect('species-selected', pk=pk)

current_sort = request.session.get("current_sort") or "fossil_name"

if "ordering" in request.GET:
    ordering = request.GET["ordering"]
    if ordering == current_sort:
        ordering = "-" + ordering
    request.session["current_sort"] = ordering
else:
    ordering = current_sort

fossils_in_species = DBFossil.objects.filter(fossil_species=specie).order_by(ordering)

paginator = Paginator(fossils_in_species, 5)
page = request.GET.get('page')
fossils = paginator.get_page(page)

# add ordering to the context:
return render(request, 'app_fossils/species.html', {
    ...
    'ordering': ordering,
    ...
})

---

Template

Add sorting links to the table thead

<thead>
    <tr>
        <th scope="col">
        <a href="?ordering=fossil_image_resized" style="text-decoration: none;">
            🖼️ {% if ordering == 'fossil_image_resized' %}▲ {% elif ordering == '-fossil_image_resized' %}▼ {% else %}⇅ {% endif %}
        </a>
        </th>
        <th scope="col">
        <a href="?ordering=fossil_name" style="text-decoration: none;">
            Fossil {% if ordering == 'fossil_name' %}▲ {% elif ordering == '-fossil_name' %}▼ {% else %}⇅ {% endif %}
        </a>
        </th>
        <th scope="col">
        <a href="?ordering=fossil_age_in_years" style="text-decoration: none;">
            Age {% if ordering == 'fossil_age_in_years' %}▲ {% elif ordering == '-fossil_age_in_years' %}▼ {% else %}⇅ {% endif %}
        </a>
        </th>
        <th scope="col">
        <a href="?ordering=fossil_condition" style="text-decoration: none;">
            Condition {% if ordering == 'fossil_condition' %}▲ {% elif ordering == '-fossil_condition' %}▼ {% else %}⇅ {% endif %}
        </a>
        </th>
        <th scope="col">
        <a href="?ordering=fossil_value" style="text-decoration: none;">
            Value {% if ordering == 'fossil_value' %}▲ {% elif ordering == '-fossil_value' %}▼ {% else %}⇅ {% endif %}
        </a>
        </th>
    </tr>
</thead>

Add navigation:

<nav aria-label="Navigation">
    <ul class="pagination justify-content-center mt-3 mb-3 text-center">
      {% if species.has_previous %}
        <li class="page-item"><a class="page-link" href="?page=1"><<</a></li>
        <li class="page-item"><a class="page-link" href="?page={{ species.previous_page_number }}"><</a></li>
      {% else %}
        <li class="page-item disabled"><a class="page-link"><<</a></li>
        <li class="page-item disabled"><a class="page-link"><</a></li>
      {% endif %}
    
      <li class="page-item dropdown">
        <button class="btn dropdown-toggle border rounded-0" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="min-width: 150px">
          {{ species.number }} / {{ species.paginator.num_pages }}
        </button>
        <ul class="dropdown-menu">
          {% for page_num in species.paginator.page_range %}
            {% if page_num == species.number %}
              <li><a class="dropdown-item active" href="?page={{ page_num }}">{{ page_num }}</a></li>
            {% else %}
              <li><a class="dropdown-item" href="?page={{ page_num }}">{{ page_num }}</a></li>
            {% endif %}
          {% endfor %}
        </ul>
      </li>
      
      {% if species.has_next %}
        <li class="page-item"><a class="page-link" href="?page={{ species.next_page_number }}">></a></li>
        <li class="page-item"><a class="page-link" href="?page={{ species.paginator.num_pages }}">>></a></li>
      {% else %}
        <li class="page-item disabled"><a class="page-link" href="#">></a></li>
        <li class="page-item disabled"><a class="page-link" href="#">>></a></li>
      {% endif %}
    </ul>
  </nav>

Add button to reset sorting

<div class="container text-center">
    {% if ordering != 'fossil_name' %}
        <a href="{% url 'species-selected' specie.id %}?reset=True"><span class="badge rounded-pill text-bg-danger" style="font-weight: normal;">Reset sorting</span></a>
    {% endif %}
</div>