How to properly implement Django (Wagtail CMS) pagination in modal window using Select html tag?

I have a list view in a modal window, once the user chooses the option of the select element, the pagination changes the url queryset (?p=<page_number>), although, in a normal list view there is no issue,as it changes the url, in a modal, it changes the entire page's location (URL address), which of course causes the lost of changes in the main page (document form), I just need the modal list to be changed by the number of pagination-page. I have searched and read almost all documentations pages related to pagination of a list view using Django, however I was unable to find the solution.

here is the modal pagination template code (see the comments that indicates not working parts):

{% load wagtailadmin_tags %}{# Changed by HH #}
{% if linkurl %}{% url linkurl as url_to_use %}{% endif %}

{% if items.has_previous or items.has_next %} 
    <div class='pagination center' aria-label="Pagination">
        <!-- this is working -->
        {% if items.has_previous %}<div class="l_arrow previous"><a href="{{ url_to_use }}{% querystring p=items.previous_page_number %}" class="icon">Previous</a></div>{% endif %}
        <p>{% with pr=items.paginator.page_range page_num=items.number total_pages=items.paginator.num_pages %}
            Page {{ page_num }} of {{ total_pages }}
            <!-- this is NOT working -->
            <select onchange="gotopage(this)" name="pg_selector" title="pg_selector" id="pg_selector" disabled>
                {% for i in pr %}
                <option value="{{ url_to_use }}{% querystring p=i %}" data-page="{{ i }}" {% if i == page_num %} selected {% endif %}>{{i}}</option>
                {% endfor %}

            {% endwith %}
        <!-- this is working -->
        {% if items.has_next %}<div class="r_arrow next"><a href="{{ url_to_use }}{% querystring p=items.next_page_number %}" class="icon">Next</a></div>{% endif %}
{% endif %}
Back to Top