I managed to create ajax pagination with select options dropdown. It works, but I want to change it to bootstrap pagination to be more user friendly.

Select pagination

<label for="pages">Pages</label>
<select id="pages" name="Filter[page]" class="custom-select">
    {% for i in 1..pages %}
            {% if i == page %}
                    <option id="page{{ i }}" value="{{ page }}" selected>{{ page }}</option>
            {% else %}
                    <option id="page{{ i }}" value="{{ i }}">{{ i }}</option>
            {% endif %}
    {% endfor %}
</select>

Select pagination converted to Bootstrap pagination

<div id="paginationWrap">
    {% if pages > 1 %}
        <ul class="pagination justify-content-center">
            {% if page > 1 %}
                <li class="page-item-icon">
                    <a class="page-link" href="{{ page - 1 }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            {% endif %}

            {% for i in 1..pages %}
                <li class="page-item {{ i == page ? 'active' : null }}">
                    <div id="page{{ i }}" class="page-link">{{ i }}</div>
                </li>
            {% endfor %}

            {% if pages > page %}
                <li class="page-item-icon">
                    <a class="page-link" href="{{ page + 1 }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            {% endif %}
        </ul>
    {% endif %}
</div>

Javascript

$(document).on("click", ".page-link", function() {
   var pageClickValue = $(this).attr('id');
   var pageValue = pageClickValue.substring(4)
   console.log(pageValue);

    $('#paginationWrap').val(pageValue);

    var $form = $(this).closest('form');
    console.log($form);
    $form.request();
});

Here is the problem, If click any of bootstrap pagination pages (1 or 2 or 3) it always returns "next" page and then it stops working. Every next click I only see ajax request being sent but nothing changes (Only first click works). Is there any other way to convert this select dropdown even to radio button pagination, since this don't works?

Temporary fix is to use both (select box and bootstrap pagination). When click on bootstrap pagination, it triggers click on selected value. It works, but it's probably not best practice.

Looks good. Thanks for sharing!

I can't see anything obviously wrong from reading this code. If you need us to investigate this issue, you are welcome to consider a premium support plan so we can dedicate some time to it

One other thing to consider might be using the $(document).render(function() { /* ... */ }); JS event, this is called when the page loads and after every AJAX call

Hope this helps!