Pagination Updated - Items per page option added #1625
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| class PaginatedListViewMixin: | ||
| paginate_by = 20 | ||
| max_page_size = 100 | ||
|
|
||
| PAGE_SIZE_CHOICES = [ | ||
| {"value": 20, "label": "20 per page"}, | ||
| {"value": 50, "label": "50 per page"}, | ||
| {"value": 100, "label": "100 per page"}, | ||
| ] | ||
|
|
||
| def get_paginate_by(self, queryset=None): | ||
| try: | ||
| page_size = int(self.request.GET.get("page_size", self.paginate_by)) | ||
| if page_size <= 0: | ||
| return self.paginate_by | ||
| return min(page_size, self.max_page_size) | ||
| except (ValueError, TypeError): | ||
| return self.paginate_by | ||
|
|
||
| def get_context_data(self, **kwargs): | ||
|
There was a problem hiding this comment. It adds pagination data to template context - current page size, size choices (can be handled by altering PAGE_SIZE_CHOICES) , total count and page range. it also preserves search params across pagination. |
||
| context = super().get_context_data(**kwargs) | ||
|
|
||
| current_page_size = self.get_paginate_by() | ||
| total_count = context["paginator"].count | ||
|
|
||
| context.update( | ||
| { | ||
| "current_page_size": current_page_size, | ||
| "page_size_choices": self.PAGE_SIZE_CHOICES, | ||
| "total_count": total_count, | ||
| "page_range": self._get_page_range( | ||
| context["paginator"], context["page_obj"].number | ||
| ), | ||
| "search": self.request.GET.get("search", ""), | ||
| } | ||
| ) | ||
|
|
||
| return context | ||
|
|
||
| def _get_page_range(self, paginator, current_page, window=2): | ||
|
There was a problem hiding this comment. it creates page number sequence. Shows all numbers for small sets (<5 pages). For larger sets, shows first/last pages around current page with (...) for gaps. |
||
| if paginator.num_pages <= 5: | ||
| return range(1, paginator.num_pages + 1) | ||
|
|
||
| pages = [1] | ||
| if current_page > 3: | ||
| pages.append("...") | ||
|
|
||
| start_page = max(2, current_page - window) | ||
| end_page = min(paginator.num_pages - 1, current_page + window) | ||
| pages.extend(range(start_page, end_page + 1)) | ||
|
|
||
| if current_page < paginator.num_pages - 2: | ||
| pages.append("...") | ||
|
|
||
| if paginator.num_pages not in pages: | ||
| pages.append(paginator.num_pages) | ||
|
|
||
| return pages | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,77 @@ | ||
| <div class="pagination-controls mb-4"> | ||
| <div class="is-flex is-justify-content-center mb-3"> | ||
| <div class="select is-small {% if total_count < current_page_size %}is-disabled{% endif %}"> | ||
| <select onchange="handlePageSizeChange(this.value)" | ||
| {% if total_count < current_page_size %}disabled="disabled"{% endif %}> | ||
| {% for choice in page_size_choices %} | ||
| <option value="{{ choice.value }}" | ||
| {% if choice.value == current_page_size %}selected{% endif %}> | ||
| {{ choice.label }} | ||
| </option> | ||
| {% endfor %} | ||
| </select> | ||
| </div> | ||
| </div> | ||
|
|
||
| {% if page_obj.paginator.num_pages > 1 %} | ||
| <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={{ current_page_size }}" | ||
| class="pagination-previous">Previous</a> | ||
| {% else %} | ||
| <button class="pagination-previous" disabled>Previous</button> | ||
| {% endif %} | ||
|
|
||
|
There was a problem hiding this comment. All the complexity of those templates should likely be handled in Python. |
||
| {% if page_obj.has_next %} | ||
| <a href="?page={{ page_obj.next_page_number }}&search={{ search|urlencode }}&page_size={{ current_page_size }}" | ||
| class="pagination-next">Next</a> | ||
| {% else %} | ||
| <button class="pagination-next" disabled>Next</button> | ||
| {% endif %} | ||
|
|
||
| <ul class="pagination-list"> | ||
| {% for page_num in page_range %} | ||
| {% if page_num == '...' %} | ||
| <li><span class="pagination-ellipsis">…</span></li> | ||
| {% else %} | ||
| <li> | ||
| <a href="?page={{ page_num }}&search={{ search|urlencode }}&page_size={{ current_page_size }}" | ||
| class="pagination-link {% if page_num == page_obj.number %}is-current{% endif %}" | ||
| aria-label="Go to page {{ page_num }}" | ||
| {% if page_num == page_obj.number %}aria-current="page"{% endif %}> | ||
| {{ page_num }} | ||
| </a> | ||
| </li> | ||
| {% endif %} | ||
| {% endfor %} | ||
| </ul> | ||
| </nav> | ||
| {% endif %} | ||
| </div> | ||
|
|
||
| <style> | ||
| .select.is-disabled { | ||
| opacity: 0.7; | ||
| cursor: not-allowed; | ||
| } | ||
| .select.is-disabled select { | ||
| cursor: not-allowed; | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| function handlePageSizeChange(value) { | ||
| const url = new URL(window.location.href); | ||
| const params = new URLSearchParams(url.search); | ||
| params.set('page_size', value); | ||
| params.delete('page'); | ||
|
|
||
| const search = params.get('search'); | ||
| if (search) { | ||
| params.set('search', search); | ||
| } | ||
|
|
||
| const newUrl = `${window.location.pathname}?${params.toString()}`; | ||
| window.location.href = newUrl; | ||
| } | ||
| </script> | ||
|
There was a problem hiding this comment. This js function manages URL parameters when changing pagination size. It update the page size parameter while preserving search terms, and remove the current page parameter to reset pagination. |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This function handles page size from URL parameters. Sets default to 20 items, max of 100. Validates to ensure positive integers only. Returns default if invalid values provided.