162 lines
8.4 KiB
HTML
162 lines
8.4 KiB
HTML
{% load i18n %}
|
|
|
|
{% comment %}
|
|
Unified Pagination Template
|
|
Usage: {% include "includes/pagination_unified.html" %}
|
|
|
|
Optional context variables:
|
|
- page_obj: Required - Django paginator page object
|
|
- is_paginated: Optional - Boolean to show/hide pagination
|
|
- htmx_target: Optional - HTMX target selector (e.g., "#content-container")
|
|
- show_info: Optional - Show "Showing X to Y of Z" text (default: True)
|
|
- size: Optional - Pagination size: 'sm', 'md', 'lg' (default: 'sm')
|
|
{% endcomment %}
|
|
|
|
{% if page_obj and page_obj.paginator.num_pages > 1 %}
|
|
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
|
|
{% if show_info|default:True %}
|
|
<div class="text-muted small">
|
|
{% trans "Showing" %} {{ page_obj.start_index }} {% trans "to" %} {{ page_obj.end_index }}
|
|
{% trans "of" %} {{ page_obj.paginator.count }} {% trans "results" %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<nav aria-label="{% trans 'Page navigation' %}">
|
|
<ul class="pagination pagination-{{ size|default:'sm' }} mb-0">
|
|
{# First Page Button #}
|
|
{% if page_obj.has_previous %}
|
|
<li class="page-item">
|
|
<a class="page-link"
|
|
href="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}"
|
|
{% if htmx_target %}hx-get="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}" hx-target="{{ htmx_target }}" hx-swap="outerHTML"{% endif %}
|
|
aria-label="{% trans 'First' %}">
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
<i class="fas fa-angle-double-right"></i>
|
|
{% else %}
|
|
<i class="fas fa-angle-double-left"></i>
|
|
{% endif %}
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
<i class="fas fa-angle-double-right"></i>
|
|
{% else %}
|
|
<i class="fas fa-angle-double-left"></i>
|
|
{% endif %}
|
|
</span>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{# Previous Page Button #}
|
|
{% if page_obj.has_previous %}
|
|
<li class="page-item">
|
|
<a class="page-link"
|
|
href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}"
|
|
{% if htmx_target %}hx-get="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}" hx-target="{{ htmx_target }}" hx-swap="outerHTML"{% endif %}
|
|
aria-label="{% trans 'Previous' %}" rel="prev">
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
<i class="fas fa-angle-right"></i>
|
|
{% else %}
|
|
<i class="fas fa-angle-left"></i>
|
|
{% endif %}
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
<i class="fas fa-angle-right"></i>
|
|
{% else %}
|
|
<i class="fas fa-angle-left"></i>
|
|
{% endif %}
|
|
</span>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{# Page Numbers - Show window of ±2 around current page, plus first and last #}
|
|
{% with start=page_obj.number|add:"-2" end=page_obj.number|add:"2" %}
|
|
{% for num in page_obj.paginator.page_range %}
|
|
{% if num == 1 or num == page_obj.paginator.num_pages or num >= start and num <= end %}
|
|
{% if num == page_obj.number %}
|
|
<li class="page-item active" aria-current="page">
|
|
<span class="page-link">{{ num }}</span>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item">
|
|
<a class="page-link"
|
|
href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}"
|
|
{% if htmx_target %}hx-get="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}" hx-target="{{ htmx_target }}" hx-swap="outerHTML"{% endif %}>
|
|
{{ num }}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% elif num == 2 and start > 2 %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">...</span>
|
|
</li>
|
|
{% elif num == page_obj.paginator.num_pages|add:"-1" and end < page_obj.paginator.num_pages|add:"-1" %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">...</span>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endwith %}
|
|
|
|
{# Next Page Button #}
|
|
{% if page_obj.has_next %}
|
|
<li class="page-item">
|
|
<a class="page-link"
|
|
href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}"
|
|
{% if htmx_target %}hx-get="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}" hx-target="{{ htmx_target }}" hx-swap="outerHTML"{% endif %}
|
|
aria-label="{% trans 'Next' %}" rel="next">
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
<i class="fas fa-angle-left"></i>
|
|
{% else %}
|
|
<i class="fas fa-angle-right"></i>
|
|
{% endif %}
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
<i class="fas fa-angle-left"></i>
|
|
{% else %}
|
|
<i class="fas fa-angle-right"></i>
|
|
{% endif %}
|
|
</span>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{# Last Page Button #}
|
|
{% if page_obj.has_next %}
|
|
<li class="page-item">
|
|
<a class="page-link"
|
|
href="?page={{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}"
|
|
{% if htmx_target %}hx-get="?page={{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}" hx-target="{{ htmx_target }}" hx-swap="outerHTML"{% endif %}
|
|
aria-label="{% trans 'Last' %}">
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
<i class="fas fa-angle-double-left"></i>
|
|
{% else %}
|
|
<i class="fas fa-angle-double-right"></i>
|
|
{% endif %}
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">
|
|
{% if LANGUAGE_CODE == 'ar' %}
|
|
<i class="fas fa-angle-double-left"></i>
|
|
{% else %}
|
|
<i class="fas fa-angle-double-right"></i>
|
|
{% endif %}
|
|
</span>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
{% endif %}
|