Skip to content

Commit

Permalink
feat: improve listview pagination
Browse files Browse the repository at this point in the history 
This improves the pagination links below the table in the generic list
view. to make the template code smaller, we introducce a templatetag
`page_range` that uses the paginators get_elided_page_range to get a
list of useful pagination links.

Closes: #416
  • Loading branch information
@b1rger
b1rger committed Dec 14, 2023
1 parent 0c44287 commit 196bc96
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 78 deletions.
125 changes: 47 additions & 78 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,48 +256,59 @@ <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 %}
<small>{{ table.page.object_list|length }} results per page</small>
<nav aria-label="Table navigation">
<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 %}

{% if table.page.has_previous or table.page.has_next %}
{% page_range paginator=table.paginator number=table.page.number as page_range %}
{% for p in page_range %}

{% 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 page_obj.number == p %}
<li class="active page-item">
<span class="page-link">{{ p }} <span class="sr-only">(current)</span></span>
</li>
{% else %}

{% if table.page.has_next %}
{% 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 %}

{% 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 %}
{% endfor %}

{% 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>
<div class="form-group" style="width: 20%;">
<label for="goto">Go to page</label>
</nav>

{% 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;">
Expand All @@ -305,57 +317,14 @@ <h1>{{ data.title }}</h1>
{% 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 %}

{% 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>
{% else %}
<li>
<a href="{% querystring table.prefixed_page_field=p %}"
style="padding: 5px 10px 5px 10px">{{ p }}</a>
</li>
{% endif %}

{% endfor %}
{% endif %}

{% 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 %}
{% endblock pagination.allpages %}

{% endif %}

</ul>
{% endif %}

{% endblock pagination.allpages %}
</div>
</div>
</div>
</div>
</div>

{% if 'entities' in APPS %}{% endif %}

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 196bc96

Please sign in to comment.