How do i setup ajax paging for entries Im looking for a good way to setup paging for new items with a simple "load more" button at the bottom.

I know i'd use something like

{% if craft.request.isAjax %}


on the listing template to not include the main _layout file for the ajax requests and then using the paginate tags to control which entries to return.

Curious is anyone has a more streamlined approach
Hey So here is what i came up with, curious if anyone has a more streamlined approach.

https://gist.github.com/keithmancuso/17619fc405a621b4a11e

{% 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 %}
&lt;h1&gt;News&lt;/h1&gt;
&lt;div id="news-entries"&gt;
{% endif %}

{% paginate craft.entries(params) as entries %}
{% for entry in entries %}
  &lt;article class="news"&gt;
    &lt;h2&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h2&gt;
    {{ entry.body }}
    &lt;/article&gt;
{% endfor %}
{% endpaginate %}

{% if not craft.request.isAjax %}
&lt;/div&gt;

&lt;a href="#" id="loadMore" class="btn btn-default"&gt;load more news&lt;/a&gt;

&lt;div id="loading" style="display:none"&gt;
    &lt;img src="/images/loading.gif"/&gt;
&lt;/div&gt;



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