This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

Slasher
Slasher

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();
});

enter image description here 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?

Slasher
Slasher

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.

daftspunky
daftspunky

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!

1-3 of 3

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.