<p>Here is what I did in my blog index: </p>

<pre><code>        {% paginate craft.entries.section('blog').limit(1) as pageInfo, blogEntries %}

        &lt;div id="post-output"&gt;

            {% for entry in blogEntries %}
                &lt;article&gt;
                    &lt;h3&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h3&gt;
                    &lt;p&gt;Posted on {{ entry.postDate.format('F d, Y') }}&lt;/p&gt;
                    &lt;p&gt;&lt;a href="{{ entry.url }}"&gt;Continue reading&lt;/a&gt;&lt;/p&gt;
                &lt;/article&gt;
            {% endfor %}

        &lt;/div&gt;

        {% set numOfpages = pageInfo.totalPages %}

        &lt;button id="more-button" data-page="{{craft.app.request.pageNum()}}" data-batch="1" data-total="{{ numOfpages}}"&gt;Load More&lt;/button&gt;
</code></pre>

<p>and in my javascript: </p>

<pre><code>$("#more-button").on('click', function () {
var btn = $(this),
    page = btn.data('page'),
    batch = btn.data('batch'),
    total = btn.data('total'),
    offset = page * batch,
    newPage = page + 1;

console.log(newPage);
console.log(total);

if ( newPage &lt;= total ) {

    loadPosts(offset, batch);
    // set the buttons page attribute to the new page it is on.
    btn.data('page',newPage);
}

if ( newPage == total ) {
    $('#more-button').hide();
}

});

function loadPosts (offset, limit) {
$.get('/ajax/posts', { offset:offset, limit:limit }, function (data) {
    var postOutput = $('#post-output');
    postOutput.append(data);
});
}
</code></pre>

CC BY-SA 3.0
2018-04-19T15:40:25.570Z
2018-04-19T15:40:25.570Z
Danielle Frappier
<p>I am use a load more button in place of pagination. I just using jquery and ajax using this <a href="https://craftcms.stackexchange.com/questions/18167/show-more-entries-on-click">post</a> as a starting point.</p>

<p>The problem I'm having is how to hide the button when there is no more posts to show. I thought I could do this with pagination but its not working out.  </p>

<p>Here is my blog index:</p>

<pre><code>            {% paginate craft.entries.section('blog').limit(2) as pageInfo, blogEntries %}

        &lt;div id="post-output"&gt;

            {% for entry in blogEntries %}
                &lt;article&gt;
                    &lt;h3&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h3&gt;
                    &lt;p&gt;Posted on {{ entry.postDate.format('F d, Y') }}&lt;/p&gt;
                    &lt;p&gt;&lt;a href="{{ entry.url }}"&gt;Continue reading&lt;/a&gt;&lt;/p&gt;
                &lt;/article&gt;
            {% endfor %}

        &lt;/div&gt;

        {% if pageInfo.nextUrl %}

            &lt;button id="more-button" data-page="{{craft.request.getPageNum()}}" data-batch="2"&gt;Load More&lt;/button&gt;

        {% endif %}
</code></pre>

<p>Here is my javascript:</p>

<pre><code>import $ from 'jquery';

$("#more-button").on('click', function () {
var btn = $(this),
    page = btn.data('page'),
    batch = btn.data('batch'),
    offset = page * batch,
    newPage = page + 1;

loadPosts(offset, batch);
// set the buttons page attribute to the new page it is on.
btn.data('page',newPage);

console.log('page');
console.log(newPage);
});

function loadPosts (offset, limit) {
$.get('/ajax/posts', { offset:offset, limit:limit }, function (data) {
    var postOutput = $('#post-output');
    postOutput.append(data);
});
}
</code></pre>

<p>and here is the ajax/_posts:</p>

<pre><code>{% set offset = craft.app.request.getParam('offset') %}
{% set limit = craft.app.request.getParam('limit') %}
{% set moreitems = craft.entries.section('blog').limit(limit).offset(offset).all() %}

{% for entry in moreitems %}
&lt;article&gt;
    &lt;h3&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h3&gt;
    &lt;p&gt;Posted on {{ entry.postDate.format('F d, Y') }}&lt;/p&gt;
    &lt;p&gt;&lt;a href="{{ entry.url }}"&gt;Continue reading&lt;/a&gt;&lt;/p&gt;
&lt;/article&gt;
{% endfor %}
</code></pre>

CC BY-SA 3.0
2018-04-18T14:16:54.857Z
I can't think of clean way to do this without PHP. You could eventually return a hidden input field with the remaining number of elements and check this input value with javascript after you appended the html but I'm not really a friend of avoiding PHP for certain reasons. The other way would be to check the lenght of `data` and hide the container if it's 0
Robin Schambach
CC BY-SA 3.0
2018-04-18T16:43:13.437Z
@RobinSchambach your comment gave me an idea. here is what I did in my blog index: `{% set numOfpages = pageInfo.totalPages %}
   
<button id="more-button" data-page="{{craft.app.request.pageNum()}}" data-batch="2" data-total="{{ numOfpages}}">Load More</button>`
Danielle Frappier
CC BY-SA 3.0
2018-04-18T16:45:56.827Z
and in the javascript: `$("#more-button").on('click', function () {
    var btn = $(this),
        page = btn.data('page'),
        batch = btn.data('batch'),
        total = btn.data('total'),
        offset = page * batch,
        newPage = page + 1;
    if ( newPage <= total ) {
        loadPosts(offset, batch);
        btn.data('page',newPage);
    }
    if ( newPage == total ) {
        $('#more-button').hide();
    }
});
Danielle Frappier
CC BY-SA 3.0
2018-04-18T20:52:09.327Z
@DanielleFrappier if that solution worked for you, would you mind adding that as an official answer?
Brad Bell
CC BY-SA 3.0
2018-04-19T15:40:04.750Z
Sure no problem
Danielle Frappier
<ajax><pagination>
When to hide show more button
# When to hide show more button

(Asked by: username_0 on 2018-04-18)

I am use a load more button in place of pagination. I just using jquery and ajax using this post as a starting point.
The problem I'm having is how to hide the button when there is no more posts to show. I thought I could do this with pagination but its not working out.  
Here is my blog index:
            {% paginate craft.entries.section('blog').limit(2) as pageInfo, blogEntries %}

        

            {% for entry in blogEntries %}
                
                    {{ entry.title }}
                    Posted on {{ entry.postDate.format('F d, Y') }}
                    Continue reading
                
            {% endfor %}

        

        {% if pageInfo.nextUrl %}

            Load More

        {% endif %}

Here is my javascript:
import $ from 'jquery';

$("#more-button").on('click', function () {
var btn = $(this),
    page = btn.data('page'),
    batch = btn.data('batch'),
    offset = page * batch,
    newPage = page + 1;

loadPosts(offset, batch);
// set the buttons page attribute to the new page it is on.
btn.data('page',newPage);

console.log('page');
console.log(newPage);
});

function loadPosts (offset, limit) {
$.get('/ajax/posts', { offset:offset, limit:limit }, function (data) {
    var postOutput = $('#post-output');
    postOutput.append(data);
});
}

and here is the ajax/_posts:
{% set offset = craft.app.request.getParam('offset') %}
{% set limit = craft.app.request.getParam('limit') %}
{% set moreitems = craft.entries.section('blog').limit(limit).offset(offset).all() %}

{% for entry in moreitems %}

    {{ entry.title }}
    Posted on {{ entry.postDate.format('F d, Y') }}
    Continue reading

{% endfor %}

**Tags:** ajax, pagination
> **Comments:**
> **username_1**: I can't think of clean way to do this without PHP. You could eventually return a hidden input field with the remaining number of elements and check this input value with javascript after you appended the html but I'm not really a friend of avoiding PHP for certain reasons. The other way would be to check the lenght of `data` and hide the container if it's 0  
> **username_0**: @RobinSchambach your comment gave me an idea. here is what I did in my blog index: `{% set numOfpages = pageInfo.totalPages %}     <button id="more-button" data-page="{{craft.app.request.pageNum()}}" data-batch="2" data-total="{{ numOfpages}}">Load More</button>`  
> **username_0**: and in the javascript: `$("#more-button").on('click', function () {     var btn = $(this),         page = btn.data('page'),         batch = btn.data('batch'),         total = btn.data('total'),         offset = page * batch,         newPage = page + 1;     if ( newPage <= total ) {         loadPosts(offset, batch);         btn.data('page',newPage);     }     if ( newPage == total ) {         $('#more-button').hide();     } });  
> **username_2**: @DanielleFrappier if that solution worked for you, would you mind adding that as an official answer?  
> **username_0**: Sure no problem  

---

## 1 answers

### Answer by username_0 on 2018-04-19. Score: 1

Here is what I did in my blog index: 
        {% paginate craft.entries.section('blog').limit(1) as pageInfo, blogEntries %}

        

            {% for entry in blogEntries %}
                
                    {{ entry.title }}
                    Posted on {{ entry.postDate.format('F d, Y') }}
                    Continue reading
                
            {% endfor %}

        

        {% set numOfpages = pageInfo.totalPages %}

        Load More

and in my javascript: 
$("#more-button").on('click', function () {
var btn = $(this),
    page = btn.data('page'),
    batch = btn.data('batch'),
    total = btn.data('total'),
    offset = page * batch,
    newPage = page + 1;

console.log(newPage);
console.log(total);

if ( newPage <= total ) {

    loadPosts(offset, batch);
    // set the buttons page attribute to the new page it is on.
    btn.data('page',newPage);
}

if ( newPage == total ) {
    $('#more-button').hide();
}

});

function loadPosts (offset, limit) {
$.get('/ajax/posts', { offset:offset, limit:limit }, function (data) {
    var postOutput = $('#post-output');
    postOutput.append(data);
});
}


---

