Hi, I followed WatchandLearn's Octobercms tutorial to build an Ajax filter.
I could get the pagination working within the form in select option, like below.

{{ form_ajax('onFilterCars', { update: { 'cars/cars': '#partialCars','cars/paginate': '#partialPaginate' } }) }}
    {# Other Select Option1 #}
    {# Other Select Option2 #}
    <div id="partialPaginate">
               {% partial 'cars/paginate' %}
    </div>
{{ form_close() }} 

And cars/paginate partial below

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

But I want a bootstrap pagination at bottom of the page, something similar to below

{{ form_ajax('onFilterCars', { update: { 'cars/cars': '#partialCars','cars/paginate': '#partialPaginate' } }) }}
    {# Other Select Option1 #}
    {# Other Select Option2 #}
{{ form_close() }} 

<div class="container">
    <div id="partialCars">
        {% partial 'cars/cars' %}
     </div>
     <div id="partialPaginate">
               {% partial 'cars/paginate' %}
    </div>
</div>

Where cars/paginate partial is below.

 {% 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 %}

Please kindly help me with this.

Also how to implement infinite scrolling?

Please refer me to any tutorial, if there is any.

Thanks a lot in advance

Hi Dijo,

Take a look at the Clean Blog theme.

It has an "auto pager" which provides infinite scrolling:

<div
    class="text-center"
    data-control="auto-pager"
    data-request="onPagePosts"
    data-request-update="'home/posts': '@#homePosts'"
    data-current-page="1"
    data-last-page="{{ posts.lastPage }}">
    <a class="text-muted oc-loading">Fetching posts..</a>
</div>

And a link to the auto-pager.js script to make it work: https://github.com/responsiv/clean-theme/blob/master/assets/javascript/controls/auto-pager.js

I hope this helps!