Hi All,
I have a page with 45 rows in a repeater field called issues
I have managed to get the rows to only display 6 at a time, and following this tutorial I have managed to get the pagination to work
Now, my question is, how would I go about changing the pagination to a ‘Load More’ button, that loads the next 6 rows via an AJAX call?
Current Code:
<?php
if( get_query_var('page') ) {
$page = get_query_var( 'page' );
} else {
$page = 1;
}
$row = 0;
$issues_per_page = 6; // How many images to display on each page
$issues = get_field('issues');
$total = count( $issues );
$pages = ceil( $total / $issues_per_page );
$min = ( ( $page * $issues_per_page ) - $issues_per_page ) + 1;
$max = ( $min + $issues_per_page ) - 1;
if(have_rows('issues')) : ?>
<h4>The Latest Issues</h4>
<div class="magazine">
<?php while(have_rows('issues')): the_row();
$row++;
if($row < $min) {
continue;
} if($row > $max) {
break;
} ?>
<div class="issue">
<span><i class="fa fa-file" aria-hidden="true"></i></span>
<span><strong><?php the_sub_field('issue_name'); ?></strong><br/><a href="<?php the_sub_field('pdf'); ?>" download="<?php the_sub_field('issue_name'); ?>" title="<?php the_sub_field('issue_name'); ?>">Download</a></span>
</div>
<?php endwhile; ?>
</div>
<div class="pagi">
<?php
echo paginate_links( array(
'base' => get_permalink() . '%#%' . '/',
'format' => '?page=%#%',
'current' => $page,
'total' => $pages
) ); ?>
</div>
<?php endif; ?>
FYI: The Page in question can be found here
I have added an example of front end load more functionality for a repeater on the front end of a site. It’s just the basics, but it’s a working example including a field group to test it with. The included field group will only work with ACF 5, but the rest of it should work with ACF4 as well.https://github.com/Hube2/acf-dynamic-ajax-select-example/tree/master/repeater-ajax-load-more
Hi John,
I’ve tried your solution, but it doesn’t seem to want to append any more to the container.
Here is the page in question: link
Full page template code: pastebin link
I can’t see what’s wrong…
Thanks
The AJAX function from the file repeater-ajax-load-more.php needs to go in your functions.php file so that is is available during AJAX requests. I’ve updated the comments in the example to indicate this.
Ta-Dah! Perfect, thanks @hube2 all working now
@hube2 I am using your code and it is working but is a bit slow to load the rest of the data.
Do you have an idea on how I can debug it to find the bottle neck?
I guess it would depend on what’s in your repeater. If there is a lot of rows and a lot of data it could take a while. The more data you have the longer subsequent calls will take. Also, the amount of HTML that your generating could also effect the load speed. My example is only a very basic one that takes the html returned and stuffs it into another element and html is not a compact, quick loading format. For something with a lot of data and a lot of html generated it would probably be better to return the data as a JSON object and then build the HTML on the client side using JavaScript instead of generating it with PHP.
