Sync HTMX and non-HTMX paginator styles

This commit is contained in:
jeremystretch 2021-12-14 20:53:24 -05:00
parent 298fb00a3e
commit 863fb9aa47
2 changed files with 51 additions and 43 deletions

View File

@ -1,51 +1,52 @@
{% load helpers %} {% load helpers %}
<div class="paginator float-end text-end"> <div class="row">
<div class="col col-md-6 mb-0">
{# Page number carousel #}
{% if paginator.num_pages > 1 %} {% if paginator.num_pages > 1 %}
<div class="btn-group btn-group-sm mb-3" role="group" aria-label="Pages"> <div class="btn-group btn-group-sm mb-3" role="group" aria-label="Pages">
{% if page.has_previous %} {% if page.has_previous %}
<a href="{% querystring request page=page.previous_page_number %}" class="btn btn-outline-secondary"> <a href="{% querystring request page=page.previous_page_number %}" class="btn btn-outline-secondary">
<i class="mdi mdi-chevron-double-left"></i> <i class="mdi mdi-chevron-double-left"></i>
</a> </a>
{% endif %}
{% for p in page.smart_pages %}
{% if p %}
<a href="{% querystring request page=p %}" class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}">
{{ p }}
</a>
{% else %}
<button type="button" class="btn btn-outline-secondary" disabled>
<span>&hellip;</span>
</button>
{% endif %} {% endif %}
{% endfor %} {% for p in page.smart_pages %}
{% if page.has_next %} {% if p %}
<a href="{% querystring request page=page.next_page_number %}" class="btn btn-outline-secondary"> <a href="{% querystring request page=p %}" class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}">
<i class="mdi mdi-chevron-double-right"></i> {{ p }}
</a> </a>
{% endif %} {% else %}
</div> <button type="button" class="btn btn-outline-secondary" disabled>
{% endif %} <span>&hellip;</span>
<form method="get" class="mb-2"> </button>
{% for k, v_list in request.GET.lists %} {% endif %}
{% if k != 'per_page' %}
{% for v in v_list %}
<input type="hidden" name="{{ k }}" value="{{ v }}" />
{% endfor %}
{% endif %}
{% endfor %} {% endfor %}
<div class="input-group input-group-sm"> {% if page.has_next %}
<select name="per_page" class="form-select per-page"> <a href="{% querystring request page=page.next_page_number %}" class="btn btn-outline-secondary">
{% for n in page.paginator.get_page_lengths %} <i class="mdi mdi-chevron-double-right"></i>
<option value="{{ n }}"{% if page.paginator.per_page == n %} selected="selected"{% endif %}>{{ n }}</option> </a>
{% endfor %} {% endif %}
</select> </div>
<label class="input-group-text" for="per_page">Per Page</label>
</div>
</form>
{% if page %}
<small class="text-end text-muted">
Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
</small>
{% endif %} {% endif %}
</div>
<div class="col col-md-6 mb-0 text-end">
{# Per-page count selector #}
<div class="dropdown dropup">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Per Page
</button>
<ul class="dropdown-menu">
{% for n in page.paginator.get_page_lengths %}
<li>
<a href="{% querystring request per_page=n %}" class="dropdown-item">{{ n }}</a>
</li>
{% endfor %}
</ul>
</div>
{% if page %}
<small class="text-end text-muted">
Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
</small>
{% endif %}
</div>
</div> </div>

View File

@ -2,6 +2,7 @@
<div class="row"> <div class="row">
<div class="col col-md-6 mb-0"> <div class="col col-md-6 mb-0">
{# Page number carousel #}
{% if paginator.num_pages > 1 %} {% if paginator.num_pages > 1 %}
<div class="btn-group btn-group-sm" role="group" aria-label="Pages"> <div class="btn-group btn-group-sm" role="group" aria-label="Pages">
{% if page.has_previous %} {% if page.has_previous %}
@ -44,6 +45,7 @@
{% endif %} {% endif %}
</div> </div>
<div class="col col-md-6 mb-0 text-end"> <div class="col col-md-6 mb-0 text-end">
{# Per-page count selector #}
<div class="dropdown dropup"> <div class="dropdown dropup">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Per Page Per Page
@ -61,5 +63,10 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
{% if page %}
<small class="text-end text-muted">
Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
</small>
{% endif %}
</div> </div>
</div> </div>