Ajax pagination on partials

Hello friends,

I have a question about how to load content only in partial (without refresh whole page) with pagination?
Today try a lot of things but burned out, and cant figure how to do that.

Here is how is look my page:
{% partial ‘index/slider’ %}
{% partial ‘index/service’ %}
{% partial ‘index/obyavi’ %}
{% partial ‘index/about’ %}
{% partial ‘index/cta’ %}

I want when i press next (or page 2) in pagination inside {% partial ‘index/obyavi’ %} , just to reload info there, not whole page .

Here is pagination inside {% partial ‘index/obyavi’ %} :

<nav id="paginationWrap">
        {% if jobs.lastPage > 1 %}
        <ul class="pagination float-right mt-5">
            {% if jobs.currentPage > 1 %}
            <li class="page-item"><a class="page-link" href="{{ pageLink ~'page='~ (jobs.currentPage - 1) }}">&larr;
                Prev</a>
            </li>
            {% endif %}

            {% for page in 1..jobs.lastPage %}
            <li class="{{ jobs.currentPage == page ? 'active' : null }} page-item">
                <a class="page-link" href="{{ pageLink ~'page='~ (page) }}">{{ page }}</a>
            </li>
            {% endfor %}

            {% if jobs.lastPage > jobs.currentPage %}
            <li class="page-item"><a class="page-link" href="{{ pageLink ~'page='~ (jobs.currentPage + 1) }}">Next
                &rarr;</a>
            </li>
            {% endif %}
        </ul>
        {% endif %}
    </nav>

Will be so glad for help :slight_smile:

Maybe something like this will help? Ajax Pagination | Infinite Scrolling - October CMS

1 Like

Tryed but without any success :frowning: