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,6 +1,8 @@
{% 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 %}
@ -26,26 +28,25 @@
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
<form method="get" class="mb-2">
{% for k, v_list in request.GET.lists %}
{% if k != 'per_page' %}
{% for v in v_list %}
<input type="hidden" name="{{ k }}" value="{{ v }}" />
{% endfor %}
{% endif %}
{% endfor %}
<div class="input-group input-group-sm">
<select name="per_page" class="form-select per-page">
{% for n in page.paginator.get_page_lengths %}
<option value="{{ n }}"{% if page.paginator.per_page == n %} selected="selected"{% endif %}>{{ n }}</option>
{% endfor %}
</select>
<label class="input-group-text" for="per_page">Per Page</label>
</div> </div>
</form> <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 %} {% if page %}
<small class="text-end text-muted"> <small class="text-end text-muted">
Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }} Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
</small> </small>
{% endif %} {% 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>