Pagination in a Bootstrap Modal

60
May 07, 2021, at 09:50 AM

I'd like to have pagination in a modal, such that when it refreshes the modal it would stays there.

Currently because of the Django logic {%%} the page will refresh and it will go to page 2. However, the modal would be hidden, requiring I have to open it again. Is there a way to keep the modal there after refresh?

Is there a way to do pagination without using Django, through perhaps using javascript instead?

Django Views.py (this handles the backend for the pagination)

paginator = Paginator(album_array, 5)
page_number = request.GET.get('page')
try:
    page_obj = paginator.page(page_number)
except PageNotAnInteger:
    page_obj = paginator.page(1)
except EmptyPage:
    page_obj = paginator.page(paginator.num_pages)
if page_number is not None:
    if int(page_number) > 1:
        page_obj.previous_page_number = int(page_number) - 1
    else:
        page_obj.previous_page_number = False
    if int(page_number) < paginator.num_pages:
        page_obj.next_page_number = int(page_number) + 1
    else:
        page_obj.next_page_number = False

HTML:

<!-- Pagination -->
{% if page_obj.has_other_pages %}
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %} <li class="page-item"><a href="?page={{ page_obj.previous_page_number }}"><span class="page-link">Prev</span></a></li>
            {% else %} <li class="page-item disabled"><span class="page-link">Prev</span></li>
            {% endif %}
            {% for i in page_obj.paginator.page_range %}
                {% if page_obj.number == i %} <li class="page-item active"><span class="page-link">{{ i }}</span></li>
                {% else %} <li class="page-item"><a href="?page={{ i }}"><span class="page-link">{{ i }}</a></li>
                {% endif %}
            {% endfor %}
  
            {% if page_obj.has_next %} <li class="page-item"><a href="?page={{ page_obj.next_page_number }}"><span class="page-link">Next</span></a></li>
            {% else %} <li class="page-item disabled"><span class="page-link">Next</span></li>
            {% endif %}
        </ul>
    </nav>
{% endif %}
<!-- End of Pagination -->
              
READ ALSO
Creating text element in seperate cells across columns

Creating text element in seperate cells across columns

What I am trying to do is on button press I will add 4 text elements, each text element in its own cell; beneath its corresponding columnEg

28
groupBy array based on combination of 2 properties

groupBy array based on combination of 2 properties

I want to Group array elements based on combination of 2 properties

62
How to add time stamp to push notifications when on group - Raact Native - Android

How to add time stamp to push notifications when on group - Raact Native - Android

I have implemented push notifications on android and ios

54