Skip to content

Pagination Improved - Select Item per page + Enhanced Page Number #1622

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 2 commits into from
Closed

Pagination Improved - Select Item per page + Enhanced Page Number #1622

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5d65617
Pagination Improved - Select Item per page Added + Enhanced Page Numb…
Rishi-garg03 Oct 18, 2024
ab75dbf
Merge branch 'main' into Updated-Pagination
Rishi-source Oct 18, 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 %}
41 changes: 37 additions & 4 deletions vulnerabilities/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
from vulnerabilities.utils import get_severity_range
from vulnerablecode.settings import env

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

PAGE_SIZE = 20


Expand Down Expand Up @@ -66,13 +68,17 @@ class PackageSearch(ListView):
model = models.Package
template_name = "packages.html"
ordering = ["type", "namespace", "name", "version"]
paginate_by = PAGE_SIZE
paginate_by = 20 # Default value

def get_paginate_by(self, queryset):
return int(self.request.GET.get('page_size', 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 @@ -89,24 +95,51 @@ def get_queryset(self, query=None):
.order_by("package_url")
)

def paginate_queryset(self, queryset, page_size):
paginator = Paginator(queryset, page_size)
page = self.request.GET.get('page')
try:
page_obj = paginator.page(page)
except 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 VulnerabilitySearch(ListView):
model = models.Vulnerability
template_name = "vulnerabilities.html"
ordering = ["vulnerability_id"]
paginate_by = PAGE_SIZE
paginate_by = 20 # Default value

def get_paginate_by(self, queryset):
return int(self.request.GET.get('page_size', 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')
try:
page_obj = paginator.page(page)
except 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