Dynamic pagination for Craft CMS. More info: http://craftsnippets.com/articles/dynamic-pagination-for-craft-cms

dynamic_pagination.twig

{# v2 #}
{% if pagination_list is defined %}
{% js %}

// AJAX REQUEST DATA
{% set current_url = craft.request.getRequestUri()|split(craft.request.getPath())[0]~craft.request.getPath() %}
{% set ajax_data = {
    current_url: current_url,
    pagination_list: pagination_list|hash,
    pagination_parameters: pagination_parameters ?? null,
} %}


// JS SETTINGS
var loading_class = 'is-loading'
var pagination_list_class = 'js-pages-list'
var pagination_wrapper_class = 'js-pages-wrapper'
var animation_speed = 1000

// TWIG TO JS
var endpoint_url = '{{url(pagination_endpoint ?? 'pagination_endpoint')}}'
var url_params = '{{craft.app.request.getQueryStringWithoutPath() is not empty ? '?' ~ craft.app.request.getQueryStringWithoutPath()}}';
var current_url = '{{current_url}}'
var page_trigger = '{{craft.app.config.general.pageTrigger}}'

// AJAX REQUEST
var current_request = null;  
function change_page(page_number, done){

    current_request = $.ajax({
      url: endpoint_url+'/'+page_trigger+page_number+url_params,
      method: 'GET',
      data: {{ajax_data|json_encode|raw}},
      beforeSend: function(){
        if(current_request != null) {
            current_request.abort();
        }
        $('.'+pagination_list_class).addClass(loading_class);

        var page = $("html, body");

        page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
           page.stop();
        });

        page.animate({ scrollTop: 
            $('.'+pagination_wrapper_class).position().top }, animation_speed, function(){
            page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
        });

      }
    }).always(function(){
        $('.'+pagination_list_class).removeClass(loading_class);
    }).done(function(data) {
        $('.'+pagination_wrapper_class).html(data);
        if(done){
            done();
        }
    });
}

// BACK/FORWARD BUTTON
var initial_page = '{{craft.request.getPageNum()}}'
window.addEventListener('popstate', function(e) {
    if(e.state){
        change_page(e.state);
    }else{
        change_page(initial_page);
    }
});

// PAGINATION CLICK EVENT
$('.'+pagination_wrapper_class).on('click', '[data-number]', function(e){
    e.preventDefault();
    var selected_page = $(this).attr('data-number');
    change_page(selected_page, function(){
        history.pushState(selected_page, null, current_url+'/'+page_trigger+selected_page+url_params);
    });
});

{% endjs %}    

<div class="js-pages-wrapper">
    {% include pagination_list with {
        pagination_parameters: pagination_parameters ?? null,
    } %}
</div>
{% endif %}

pagination_endpoint.twig

{# v2 #}
{% if craft.app.request.segments|last == _self and craft.app.request.isAjax %}

    {% set pages_list_path_hashed = craft.request.getParam('pagination_list') %}
    {% if craft.app.security.validateData(pages_list_path_hashed) is not same as(false) %}
        {% include craft.app.security.validateData(pages_list_path_hashed) with {
            pagination_parameters: craft.request.getParam('pagination_parameters')
        } %}
    {% endif %}

{% else %}
    {% redirect currentSite.baseUrl 301 %}
{% endif %}

pagination_pages_list.twig

{# v1 #}
{# example element query - adjust it to your website #}
{% paginate craft.entries.section('articles').limit(3) as pageInfo, pageEntries %}

{% if craft.request.isAjax() %}
    {% do pageInfo.setBasePath(craft.request.getParam('current_url')) %}
{% endif %}

{# replace code below with your entries list and pagination component #}
{% include '_components/pagination' %}
<br>
<div class="js-pages-list">
{% for entry in pageEntries %}
     <a href="{{entry.url}}">{{entry.title}}</a>
{% endfor %}
</div>

{% include '_components/pagination' %}

Hi there -

I was wondering if I could ask for a bit of help.

I'm trying to get 3 different lists to paginate on the same page (which I have done using your method).
Each list has its own links for the next pagination page (as they are different lengths).

The issue is that when I click on one the links it updates all the paginated content to be the same:

Before:

After:

Is it possible to have multiple links on the same page, each being controlled separately?

I have loaded these files like this:

is that correct? or should it just be one link?

Thanks -
W

Hi there -

I was wondering if I could ask for a bit of help.

I'm trying to get 3 different lists to paginate on the same page (which I have done using your method).
Each list has its own links for the next pagination page (as they are different lengths).

The issue is that when I click on one the links it updates all the paginated content to be the same:

Before:

After:

Is it possible to have multiple links on the same page, each being controlled separately?

I have loaded these files like this:

is that correct? or should it just be one link?

Thanks -
W

I dont think that it would be possible to use multiple list on same page using my method - pagination changes url by adding number, so if number appears in URL, it would affect all lists.

If you ignore URL asoect, i think you would just need to create 3 copies of main pagination files, so each set of buttons have separete selectors for javascript, variable names etc so there are no conflicts.