Craft Ajax Paging

gistfile1.twig

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