Skip to content

Enhance Page Number Display for improved result navigation #1619

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.

Sign up for GitHub

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

Closed
Rishi-source wants to merge 7 commits into from
Closed

Enhance Page Number Display for improved result navigation #1619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
20f1624
Enhanced Page Number Display
Rishi-garg03 Oct 17, 2024
32fef60
Merge branch 'main' into Pagination
Rishi-source Oct 17, 2024
8f19d8e
Merge branch 'main' into Pagination
Rishi-source Oct 18, 2024
f1513ba
Update pagination.html
Rishi-source Oct 19, 2024
5adc1a6
Update packages.html
Rishi-source Oct 19, 2024
7641cf6
Update vulnerabilities.html
Rishi-source Oct 19, 2024
619e1bc
Update views.py
Rishi-source Oct 19, 2024
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
81 changes: 44 additions & 37 deletions vulnerabilities/templates/includes/pagination.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,46 @@
<nav class="pagination is-centered is-small" aria-label="pagination">
{% if page_obj.has_previous %}
<a href="?page={{ page_obj.previous_page_number }}&search={{ search|urlencode }}" class="pagination-previous">Previous</a>
{% else %}
<a class="pagination-previous" disabled>Previous</a>
{% endif %}

{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}&search={{ search|urlencode }}" class="pagination-next">Next</a>
{% else %}
<a class="pagination-next" disabled>Next</a>
{% endif %}

<ul class="pagination-list">
{% if page_obj.number != 1%}
<li>
<a href="?page=1&search={{ search|urlencode }}" class="pagination-link" aria-label="Goto page 1">1</a>
</li>
{% if page_obj.number > 2 %}
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
{% endif %}
{% if is_paginated %}
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
{% if page_obj.has_previous %}
<a href="?page={{ page_obj.previous_page_number }}&search={{ search|urlencode }}&page_size={{ page_size }}" class="pagination-previous">Previous</a>
{% else %}
<a class="pagination-previous" disabled>Previous</a>
{% endif %}
<li>
<a class="pagination-link is-current" aria-label="Page {{ page_obj.number }}" aria-current="page">{{ page_obj.number }}</a>
</li>
{% if page_obj.number != page_obj.paginator.num_pages %}
{% if page_obj.next_page_number != page_obj.paginator.num_pages %}
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
{% endif %}
<li>
<a href="?page={{ page_obj.paginator.num_pages }}&search={{ search|urlencode }}" class="pagination-link" aria-label="Goto page {{ page_obj.paginator.num_pages }}">{{ page_obj.paginator.num_pages }}</a>
</li>

{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}&search={{ search|urlencode }}&page_size={{ page_size }}" class="pagination-next">Next</a>
{% else %}
<a class="pagination-next" disabled>Next</a>
{% endif %}
</ul>
</nav>

<ul class="pagination-list">
{# Always show page 1 #}
{% if page_obj.number > 1 %}
<li><a href="?page=1&search={{ search|urlencode }}&page_size={{ page_size }}" class="pagination-link" aria-label="Goto page 1">1</a></li>
{% if page_obj.number > 4 %}
<li><span class="pagination-ellipsis">&hellip;</span></li>
{% endif %}
{% endif %}

{# Loop to display pages within -3 and +3 range around the current page #}
{% for i in page_obj.paginator.page_range %}
{% if i > 1 and i < page_obj.paginator.num_pages %}
{% if i >= page_obj.number|add:"-3" and i <= page_obj.number|add:"3" %}
{% if page_obj.number == i %}
<li><a class="pagination-link is-current" aria-label="Page {{ i }}" aria-current="page">{{ i }}</a></li>
{% else %}
<li><a href="?page={{ i }}&search={{ search|urlencode }}&page_size={{ page_size }}" class="pagination-link" aria-label="Goto page {{ i }}">{{ i }}</a></li>
{% endif %}
{% endif %}
{% endif %}
{% endfor %}

{# Always display the last page #}
{% if page_obj.number < page_obj.paginator.num_pages %}
{% if page_obj.number < page_obj.paginator.num_pages|add:"-3" %}
<li><span class="pagination-ellipsis">&hellip;</span></li>
{% endif %}
<li><a href="?page={{ page_obj.paginator.num_pages }}&search={{ search|urlencode }}&page_size={{ page_size }}" class="pagination-link" aria-label="Goto page {{ page_obj.paginator.num_pages }}">{{ page_obj.paginator.num_pages }}</a></li>
{% endif %}
</ul>
</nav>
{% endif %}
18 changes: 18 additions & 0 deletions vulnerabilities/templates/packages.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,16 @@
<div>
{{ page_obj.paginator.count|intcomma }} results
</div>
<div class="is-flex is-justify-content-center mb-2">
<div class="select is-small">
<select id="itemsPerPage" onchange="changeItemsPerPage(this.value)">
<option value="20" {% if page_obj.paginator.per_page == 20 %}selected{% endif %}>20 per page</option>
<option value="50" {% if page_obj.paginator.per_page == 50 %}selected{% endif %}>50 per page</option>
<option value="100" {% if page_obj.paginator.per_page == 100 %}selected{% endif %}>100 per page</option>
<option value="200" {% if page_obj.paginator.per_page == 200 %}selected{% endif %}>200 per page</option>
</select>
</div>
</div>
{% if is_paginated %}
{% include 'includes/pagination.html' with page_obj=page_obj %}
{% endif %}
Expand Down Expand Up @@ -81,4 +91,12 @@

</section>
{% endif %}
<script>
function changeItemsPerPage(pageSize) {
var urlParams = new URLSearchParams(window.location.search);
urlParams.set('page_size', pageSize);
window.location.search = urlParams.toString();
}

</script>
{% endblock %}
22 changes: 20 additions & 2 deletions vulnerabilities/templates/vulnerabilities.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,17 @@
<div>
{{ page_obj.paginator.count|intcomma }} results
</div>
{% if is_paginated %}
<div class="is-flex is-justify-content-center mb-2">
<div class="select is-small">
<select id="itemsPerPage" onchange="changeItemsPerPage(this.value)">
<option value="20" {% if page_obj.paginator.per_page == 20 %}selected{% endif %}>20 per page</option>
<option value="50" {% if page_obj.paginator.per_page == 50 %}selected{% endif %}>50 per page</option>
<option value="100" {% if page_obj.paginator.per_page == 100 %}selected{% endif %}>100 per page</option>
<option value="200" {% if page_obj.paginator.per_page == 200 %}selected{% endif %}>200 per page</option>
</select>
</div>
</div>
{% if is_paginated %}
{% include 'includes/pagination.html' with page_obj=page_obj %}
{% endif %}
</div>
Expand Down Expand Up @@ -77,5 +87,13 @@
{% endif %}
</section>
{% endif %}

<script>
function changeItemsPerPage(pageSize) {
var urlParams = new URLSearchParams(window.location.search);
urlParams.set('page_size', pageSize);
window.location.search = urlParams.toString();
}

</script>

{% endblock %}
29 changes: 27 additions & 2 deletions vulnerabilities/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
from django.contrib import messages
from django.core.exceptions import ValidationError
from django.core.mail import send_mail
from django.core.paginator import EmptyPage
from django.core.paginator import PageNotAnInteger
from django.core.paginator import Paginator
from django.http.response import Http404
from django.shortcuts import redirect
from django.shortcuts import render
Expand Down Expand Up @@ -68,11 +71,16 @@ class PackageSearch(ListView):
ordering = ["type", "namespace", "name", "version"]
paginate_by = PAGE_SIZE

def get_paginate_by(self, queryset):
page_size = self.request.GET.get("page_size", "")
return int(page_size) if page_size.isdigit() else self.paginate_by

def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
request_query = self.request.GET
context["package_search_form"] = PackageSearchForm(request_query)
context["search"] = request_query.get("search")
context["page_size"] = self.get_paginate_by(self.get_queryset())
return context

def get_queryset(self, query=None):
Expand All @@ -96,17 +104,34 @@ class VulnerabilitySearch(ListView):
ordering = ["vulnerability_id"]
paginate_by = PAGE_SIZE

def get_paginate_by(self, queryset):
page_size = self.request.GET.get("page_size", "")
return int(page_size) if page_size.isdigit() else self.paginate_by

def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
request_query = self.request.GET
context["vulnerability_search_form"] = VulnerabilitySearchForm(request_query)
context["search"] = request_query.get("search")
context["page_size"] = self.get_paginate_by(self.get_queryset())
return context

def get_queryset(self, query=None):
query = query or self.request.GET.get("search") or ""
def get_queryset(self):
query = self.request.GET.get("search") or ""
return self.model.objects.search(query=query).with_package_counts()

def paginate_queryset(self, queryset, page_size):
paginator = Paginator(queryset, page_size)
page = self.request.GET.get("page", "1")
try:
page_number = int(page)
page_obj = paginator.page(page_number)
except (ValueError, PageNotAnInteger):
page_obj = paginator.page(1)
except EmptyPage:
page_obj = paginator.page(paginator.num_pages)
return (paginator, page_obj, page_obj.object_list, page_obj.has_other_pages())


class PackageDetails(DetailView):
model = models.Package
Expand Down