Return to Question

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

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

and then something like this for the params

{% if craft.request.getParam('offset') is not null %}
   {% set offsetParam = { offset: craft.request.getParam('offset')} %}
   {% set params = params|merge(offsetParam) %}
{% endif %}

but curious how others are handling this?

UPDATE:

{% if craft.request.isAjax %}
{% set layout = "_ajaxLayout" %}
{% else %}
    {% set layout = "_layout" %}
{% endif %}

{% extends layout %}

{% set limit = 10 %}
{% set offset = 0 %}

{% if craft.request.getParam('offset') is not null %}
    {% set offset = craft.request.getParam('offset') %}
    {% set params = { section:news, offset: offset } %}
{% endif %}

{% set news = craft.entries.find(params) %}

{% block content %}

{% if not craft.request.isAjax %}
<h1>News</h1>
<div id="news-entries">
{% endif %}

{% for entry in craft.entries.find(params) %}
  <article class="news">
    <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
    {{ entry.body }}
    </article>
{% endfor %}

{% 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 offset = {{offset + limit}};

    $('#loadMore').click (function (e) {
    
    e.preventDefault();
        $('#loading').show();

        $.get( "/news?offset="+offset, function( data ) {
    
          $( "#news-entries" ).append( data );
            $('.loading').hide();
            offset = offset + {{limit}};
        
        });

    });
});

{% endset %}

{% includeJs pagingJs %}

{% endif %}

{% endblock %}

UPDATE:

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

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 offset = 0 %}

{% if craft.request.getParam('offset') is not null %}
    {% set offset = craft.request.getParam('offset') %}
    {% set params = { section:news, offset: offset } %}
{% endif %}

{% set news = craft.entries.find(params) %}

{% block content %}

{% if not craft.request.isAjax %}
<h1>News</h1>
<div id="news-entries">
{% endif %}

{% for entry in craft.entries.find(params) %}
  <article class="news">
    <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
    {{ entry.body }}
    </article>
{% endfor %}

{% 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 offset = {{offset + limit}};

    $('#loadMore').click (function (e) {
    
    e.preventDefault();
        $('#loading').show();

        $.get( "/news?offset="+offset, function( data ) {
    
          $( "#news-entries" ).append( data );
            $('.loading').hide();
            offset = offset + {{limit}};
        
        });

    });
});

{% endset %}

{% includeJs pagingJs %}

{% endif %}

{% endblock %}