Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-05-22T15:24:41.347Z
Answers.Text: I know this is a bit old but has anyone found a solution to determine the end of entries to hide the load more?
Answers.UserDisplayName: Bowenac
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-05-22T15:50:29.040Z
Answers.Text: Update: figured out a solution will post as an answer including code from Keith Mancuso.
Answers.UserDisplayName: Bowenac
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-13T22:15:11.337Z
Answers.Text: One issue I'm still having is how do I know when I'm at the end of the pages?
Answers.UserDisplayName: Keith Mancuso
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-18T15:02:55.100Z
Answers.Text: 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.
Answers.UserDisplayName: Matt Stein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-18T16:59:15.487Z
Answers.Text: 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?
Answers.UserDisplayName: Keith Mancuso
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-18T17:21:46.603Z
Answers.Text: I'm not sure, but I bet Brandon or Brad would be!
Answers.UserDisplayName: Matt Stein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-13T20:21:53.003Z
Answers.LastActivityDate: 2014-06-13T20:21:53.003Z
Answers.UserDisplayName: Keith Mancuso
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-05-22T16:10:32.387Z
Answers.LastActivityDate: 2015-05-22T16:10:32.387Z
Answers.UserDisplayName: Bowenac
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-24T11:07:09.460Z
Answers.Text: 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
Answers.UserDisplayName: H2ONOCK
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-13T18:17:10.313Z
Answers.LastActivityDate: 2014-06-13T18:17:10.313Z
Answers.UserDisplayName: Bryan Redeagle
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-06-13T20:18:47.047Z
Comments.Text: 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.
Comments.UserDisplayName: Brandon Kelly
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-06-13T20:19:28.477Z
Comments.Text: Sure makes sense
Comments.UserDisplayName: Keith Mancuso
Tags: <pagination><ajax>
Title: How do i setup ajax paging for entries
ThreadText: # 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 username_0, 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/username_0/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 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 username_1 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 username_0.  
  
  ---
  
  ### 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 %}
  <!-- Ajax Container Start -->
  <div class="container-fluid add-top resources">
      <!-- Set the total count of entries we will have access to in this section-->
      <input id="totalResourceCount" type="hidden" value="{{totalCount}}">
  
  ```
  
  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 %}
          <h1>{{ entry.title }}</h1>
          {{ 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  
  
  ---
  
  