<p>Hey So here is what i came up with, curious if anyone has a more streamlined approach.</p>

<p><a href="https://gist.github.com/keithmancuso/17619fc405a621b4a11e">https://gist.github.com/keithmancuso/17619fc405a621b4a11e</a></p>

<pre><code>{% 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 %}
</code></pre>

CC BY-SA 3.0
2015-05-22T15:24:41.347Z
I know this is a bit old but has anyone found a solution to determine the end of entries to hide the load more?
Bowenac
CC BY-SA 3.0
2015-05-22T15:50:29.040Z
Update: figured out a solution will post as an answer including code from Keith Mancuso.
Bowenac
CC BY-SA 3.0
2014-06-13T22:15:11.337Z
One issue I'm still having is how do I know when I'm at the end of the pages?
Keith Mancuso
CC BY-SA 3.0
2014-06-18T15:02:55.100Z
I would think you'd have one of two options: 1. your JSON response starts returning empty results and `#loadMore` can be reactive, or 2. you could return the total number of entries along with counts in that JSON response, modifying your JavaScript to act accordingly when the last posts come through.
Matt Stein
CC BY-SA 3.0
2014-06-18T16:59:15.487Z
the problem seems to be that even that /p100 still returns results, it seems to just start back at the begining.  maybe thats a bug in the paging stuff?
Keith Mancuso
CC BY-SA 3.0
2014-06-18T17:21:46.603Z
I'm not sure, but I bet Brandon or Brad would be!
Matt Stein
CC BY-SA 3.0
2014-06-13T20:21:53.003Z
2014-06-13T20:21:53.003Z
Keith Mancuso
<p>Thanks to Kieth for posting an ajax solution. I just wanted to expand on it a little bit to figure out when we are at the end of the entries etc so we can hide loading more buttons etc. Here is what I did.</p>

<p>In my example I am only loading 2 entries for each click so I'm setting the count to 2, and then incrementing the count on each click by 2. </p>

<p>Here I am getting the total count for the entries above and putting this in a hidden input field inside my main container for the ajax section. Don't mind the .id('and, not '~featuredArticleIdsString) as I am just getting featured entries above this and then getting those id's so I can exclude them from the ajax section as I don't want to duplicate those entries.</p>

<pre><code>{% set category = craft.categories.group('resource') %}
{% set featuredArticleIds = craft.entries.relatedTo(category).limit(3).ids() %}
{% set featuredArticleIdsString = featuredArticleIds | join(', not ') %}
{% set totalEntries = craft.entries.relatedTo(category).id('and, not '~featuredArticleIdsString).find() %}
{% set totalCount = totalEntries | length %}
&lt;!-- Ajax Container Start --&gt;
&lt;div class="container-fluid add-top resources"&gt;
    &lt;!-- Set the total count of entries we will have access to in this section--&gt;
    &lt;input id="totalResourceCount" type="hidden" value="{{totalCount}}"&gt;
</code></pre>

<p>Then here is the ajax section...</p>

<pre><code>{% set pagingJs %}
$(function () {
    var page = 2;
    // Since we are getting two entries per click we need to set count to 2 to start
    var count = 2
   // Get the total count that we set above
    var totalCount = $("#totalResourceCount").val();
    $('#loadMore').click (function (e) {
        e.preventDefault();
        // Check if count is less than totalCount
        if(count &lt; totalCount){
            $('#loading').show();

            $.get( "/resource-ajax/p"+page, function( data ) {

                $( "#featuredResults" ).prepend( data ).fadeIn("slow");
                $('#loading').hide();
                page++;
                // Increment count by 2 entries
                count = (count) + 2;
                // Check if count is greater than or equal to the total count. If so hide the load more button. We need to check if count is greater than since we are incrementing an even number in case are total count is an odd. For example if we have total of 5 entries the second click would set the count to 6...
                if(count &gt;= totalCount){
                    $("#loadMore").hide();
                }
            });
        }
    });
});
{% endset %}
{% includeJs pagingJs %}
</code></pre>

CC BY-SA 3.0
2015-05-22T16:10:32.387Z
2015-05-22T16:10:32.387Z
Bowenac
<p>I would use Craft's built in paginate tag. You just add the page number (p2, p3, p4, etc.) to the end of the url in your ajax call and output the template like this:</p>

<pre><code>{% paginate craft.entries.section('blog').limit(10) as entries %}
    {% for entry in entries %}
        &lt;h1&gt;{{ entry.title }}&lt;/h1&gt;
        {{ entry.body }}
    {% endfor %}
{% endpaginate %}
</code></pre>

CC BY-SA 3.0
2015-10-24T11:07:09.460Z
You can also edit p2, p3 etc to a different format if you wish by adding something like 'pageTrigger'=> 'page-' inside the array found in craft/config/general.php
H2ONOCK
CC BY-SA 3.0
2014-06-13T18:17:10.313Z
2014-06-13T18:17:10.313Z
Bryan Redeagle
<p>Im looking for a good way to setup paging for new items with a simple "load more" button at the bottom.</p>

<p>I know i'd use something like</p>

<pre><code>{% if craft.request.isAjax %}
</code></pre>

<p>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.</p>

<p>Curious is anyone has a more streamlined approach</p>

CC BY-SA 3.0
2014-06-13T20:18:47.047Z
Hey Keith, glad you came up with a working solution. Can you please edit it out of your question area and post it as an actual answer? That way your solution shows up alongside other possible solutions, and can be voted on like them.
Brandon Kelly
CC BY-SA 3.0
2014-06-13T20:19:28.477Z
Sure makes sense
Keith Mancuso
<pagination><ajax>
How do i setup ajax paging for entries
# How do i setup ajax paging for entries

(Asked by: username_0 on 2014-06-13)

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

**Tags:** pagination, ajax
> **Comments:**
> **username_1**: Hey Keith, glad you came up with a working solution. Can you please edit it out of your question area and post it as an actual answer? That way your solution shows up alongside other possible solutions, and can be voted on like them.  
> **username_0**: Sure makes sense  

---

## 3 answers

### Answer by username_0 on 2014-06-13. Score: 9

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

{% endif %}

{% paginate craft.entries(params) as entries %}
{% for entry in entries %}
  
    {{ entry.title }}
    {{ entry.body }}
    
{% endfor %}
{% endpaginate %}

{% if not craft.request.isAjax %}


load more news


    




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

> **Comments:**
> **username_0**: One issue I'm still having is how do I know when I'm at the end of the pages?  
> **username_3**: I would think you'd have one of two options: 1. your JSON response starts returning empty results and `#loadMore` can be reactive, or 2. you could return the total number of entries along with counts in that JSON response, modifying your JavaScript to act accordingly when the last posts come through.  
> **username_0**: the problem seems to be that even that /p100 still returns results, it seems to just start back at the begining.  maybe thats a bug in the paging stuff?  
> **username_3**: I'm not sure, but I bet Brandon or Brad would be!  
> **username_2**: I know this is a bit old but has anyone found a solution to determine the end of entries to hide the load more?  
> **username_2**: Update: figured out a solution will post as an answer including code from Keith Mancuso.  

---

### Answer by username_2 on 2015-05-22. Score: 6

Thanks to Kieth for posting an ajax solution. I just wanted to expand on it a little bit to figure out when we are at the end of the entries etc so we can hide loading more buttons etc. Here is what I did.
In my example I am only loading 2 entries for each click so I'm setting the count to 2, and then incrementing the count on each click by 2. 
Here I am getting the total count for the entries above and putting this in a hidden input field inside my main container for the ajax section. Don't mind the .id('and, not '~featuredArticleIdsString) as I am just getting featured entries above this and then getting those id's so I can exclude them from the ajax section as I don't want to duplicate those entries.
{% set category = craft.categories.group('resource') %}
{% set featuredArticleIds = craft.entries.relatedTo(category).limit(3).ids() %}
{% set featuredArticleIdsString = featuredArticleIds | join(', not ') %}
{% set totalEntries = craft.entries.relatedTo(category).id('and, not '~featuredArticleIdsString).find() %}
{% set totalCount = totalEntries | length %}


    
    

Then here is the ajax section...
{% set pagingJs %}
$(function () {
    var page = 2;
    // Since we are getting two entries per click we need to set count to 2 to start
    var count = 2
   // Get the total count that we set above
    var totalCount = $("#totalResourceCount").val();
    $('#loadMore').click (function (e) {
        e.preventDefault();
        // Check if count is less than totalCount
        if(count < totalCount){
            $('#loading').show();

            $.get( "/resource-ajax/p"+page, function( data ) {

                $( "#featuredResults" ).prepend( data ).fadeIn("slow");
                $('#loading').hide();
                page++;
                // Increment count by 2 entries
                count = (count) + 2;
                // Check if count is greater than or equal to the total count. If so hide the load more button. We need to check if count is greater than since we are incrementing an even number in case are total count is an odd. For example if we have total of 5 entries the second click would set the count to 6...
                if(count >= totalCount){
                    $("#loadMore").hide();
                }
            });
        }
    });
});
{% endset %}
{% includeJs pagingJs %}


---

### Answer by username_4 on 2014-06-13. Score: 4

I would use Craft's built in paginate tag. You just add the page number (p2, p3, p4, etc.) to the end of the url in your ajax call and output the template like this:
{% paginate craft.entries.section('blog').limit(10) as entries %}
    {% for entry in entries %}
        {{ entry.title }}
        {{ entry.body }}
    {% endfor %}
{% endpaginate %}

> **Comments:**
> **username_5**: You can also edit p2, p3 etc to a different format if you wish by adding something like 'pageTrigger'=> 'page-' inside the array found in craft/config/general.php  

---

