Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: improve listview pagination #491

Merged
merged 1 commit into from
Dec 15, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 47 additions & 78 deletions apis_core/apis_metainfo/templates/generic_list.html
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
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)
Loading