Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Craft Ajax Paging
{% if craft.request.isAjax %}
{% set layout = "_ajaxLayout" %}
{% else %}
{% set layout = "_layout" %}
{% endif %}
{% extends layout %}
{% set limit = 10 %}
{% set params = { section: 'news', limit: limit} %}
{% block content %}
{% if not craft.request.isAjax %}
<h1>News</h1>
<div id="news-entries">
{% endif %}
{% paginate craft.entries(params) as entries %}
{% for entry in entries %}
<article class="news">
<h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
{{ entry.body }}
</article>
{% endfor %}
{% endpaginate %}
{% if not craft.request.isAjax %}
</div>
<a href="#" id="loadMore" class="btn btn-default">load more news</a>
<div id="loading" style="display:none">
<img src="/images/loading.gif"/>
</div>
{% set pagingJs %}
$(function () {
var page = 2;
$('#loadMore').click (function (e) {
e.preventDefault();
$('#loading').show();
$.get( "/news/p"+page, function( data ) {
$( "#news-entries" ).append( data );
$('.loading').hide();
page++;
});
});
});
{% endset %}
{% includeJs pagingJs %}
{% endif %}
{% endblock %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment