Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dynamic pagination for Craft CMS. More info: http://craftsnippets.com/articles/dynamic-pagination-for-craft-cms
{# 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 %}
{# 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 %}
{# 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' %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.