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 _layout file for the ajax requests

UPDATE:

So here is what i came up with, seems to work pretty well although it a little long... 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 %}
<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 offset = offset + limit %}

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