Skip to content

Commit

Permalink
feat: improve listview pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@b1rger
b1rger committed Dec 13, 2023
1 parent 8a937c2 commit 9d1798c
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 87 deletions.
122 changes: 35 additions & 87 deletions apis_core/apis_metainfo/templates/generic_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
{% load i18n %}
{% load crispy_forms_field %}
{% load crispy_forms_tags %}
{% load apiscore %}

{% block title %}Browse {{ class_name }}{% endblock %}

Expand Down Expand Up @@ -255,103 +256,50 @@ <h1>{{ data.title }}</h1>
</div>

{% block pagination.allpages %}
<div>
{% with table.page.object_list|length as count %}<p>Page total: {{ count }}</p>{% endwith %}
</div>
<ul class="pagination">

{% if table.paginator.page_range|length > 10 %}
{% if table.page.has_previous %}

{% block pagination.previous.goto %}
<li class="previous">
<a style="margin-right: 10px"
href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}">{% trans "Previous" %}</a>
</li>
{% endblock pagination.previous.goto %}

{% endif %}

{% if table.page.has_previous or table.page.has_next %}

{% block pagination.cardinality %}
{% blocktrans with table.page.number as current and table.paginator.num_pages as total %}
<p>Page {{ current }} of {{ total }}</p>
{% endblocktrans %}
{% endblock pagination.cardinality %}

{% endif %}

{% if table.page.has_next %}

{% block pagination.next.goto %}
<li class="next">
<a style="margin-left: 10px"
href="{% querystring table.prefixed_page_field=table.page.next_page_number %}"
style="border-radius: 0px">{% trans "Next" %}</a>
</li>
{% endblock pagination.next.goto %}

{% endif %}

</ul>
<div class="form-group" style="width: 20%;">
<label for="goto">Go to page</label>
<select class="form-control"
id="goto"
onchange="javascript:location.href = this.value;">
{% for p in table.paginator.page_range %}
<option value="{% querystring table.prefixed_page_field=p %}">{{ p }}</option>
{% endfor %}
</select>
</div>
{% else %}

{% if table.page.has_previous %}

{% block pagination.previous %}
<li class="previous">
<a style="margin-right: 10px"
href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}">{% trans "Previous" %}</a>
</li>
{% endblock pagination.previous %}

<small>{{table.page.object_list|length}} results per page</small>

<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
{% if page_obj.has_previous %}
<li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
{% else %}
<li class="disabled page-item"><span class="page-link">&laquo;</span></li>
{% endif %}

{% for p in table.paginator.page_range %}

{% if p == table.page.number %}
<li>
<a href="{% querystring table.prefixed_page_field=p %}"
style="background-color:#007bff;
border-color: #2e6da4;
color: #ffffff;
padding: 5px 10px 5px 10px">{{ p }}</a>
</li>
{% page_range paginator=table.paginator number=table.page.number as page_range %}
{% for p in page_range %}
{% if page_obj.number == p %}
<li class="active page-item"><span class="page-link">{{ p }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>
<a href="{% querystring table.prefixed_page_field=p %}"
style="padding: 5px 10px 5px 10px">{{ p }}</a>
</li>
{% if p == page_obj.paginator.ELLIPSIS %}
<li class="page-item"><span class="page-link">{{ p }}</span></li>
{% else %}
<li class="page-item"><a class="page-link" href="{% querystring table.prefixed_page_field=p %}">{{ p }}</a></li>
{% endif %}
{% endif %}

{% endfor %}

{% if table.page.has_next %}

{% block pagination.next %}
<li class="next">
<a style="margin-left: 10px"
href="{% querystring table.prefixed_page_field=table.page.next_page_number %}">{% trans "Next" %}</a>
</li>
{% endblock pagination.next %}

{% if page_obj.has_next %}
<li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
{% else %}
<li class="disabled page-item"><span class="page-link">&raquo;</span></li>
{% endif %}

</ul>
{% endif %}
</nav>

{% endblock pagination.allpages %}

{% if table.paginator.page_range|length > 10 %}
<div class="form-inline justify-content-center small">
<label for="goto" class="mr-3">Page</label>
<select class="form-control" id="goto" onchange="javascript:location.href = this.value;">
{% for p in table.paginator.page_range %}
<option value="{% querystring table.prefixed_page_field=p %}">{{ p }}</option>
{% endfor %}
</select>
</div>
{% endif %}
{% endblock pagination.allpages %}
</div>
</div>
</div>
Expand Down
5 changes: 5 additions & 0 deletions apis_core/core/templatetags/apiscore.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,8 @@
@register.simple_tag
def shared_url():
return getattr(settings, "SHARED_URL", "/static/")


@register.simple_tag
def page_range(paginator, number):
return paginator.get_elided_page_range(number=number)

0 comments on commit 9d1798c

Please sign in to comment.