WordPress ACF repeater pagination in table

Question

I'm having trouble with displaying pagination bar. Currently the pagination bar displays at the top of the table on the left hand side. I need it to display after the table is displayed aligned centered. I think I need to escape the loop before displaying the pagination bar, but I'm not sure how to go about it.

<table id="mytable" class="table table-bordred table-striped">
    <tbody>
    <?php
    /*
    * Paginate Advanced Custom Field repeater
    */
    if ( get_query_var( 'page' ) ) {
        $page = get_query_var( 'page' );
    } else {
        $page = 1;
    }
    // Variables
    $row           = 0;
    $jobs_per_page = 12; // How many jobs to display on each page
    $jobs          = get_field( 'job_list' );
    $total         = count( $jobs );
    $pages         = ceil( $total / $jobs_per_page );
    $min           = ( ( $page * $jobs_per_page ) - $jobs_per_page ) + 1;
    $max           = ( $min + $jobs_per_page ) - 1;
    // ACF Loop
    if ( have_rows( 'job_list' ) ) :
        ?>
        <?php
        while ( have_rows( 'job_list' ) ) :
            the_row();
            $row++;
            // set repeater variables
            $image         = get_sub_field( 'image' );
            $job_title     = get_sub_field( 'job_title' );
            $company_name  = get_sub_field( 'company_name' );
            $location      = get_sub_field( 'location' );
            $job_time      = get_sub_field( 'job_time' );
            $job_date      = get_sub_field( 'job_date' );
            $cta_link_text = get_sub_field( 'cta_link_text' );
            $cta_link      = get_sub_field( 'cta_link' );
            // Ignore this job if $row is lower than $min
            if ( $row < $min ) {
                continue; }
            // Stop loop completely if $row is higher than $max
            if ( $row > $max ) {
                break; }
            ?>
    
                <tr>
                    <td style="padding-top:20px; padding-bottom:20px;"><img src="<?php echo $image; ?>" /></td>
                    <td style="padding-top:16px;"><strong><?php echo $job_title; ?></strong><br><span style="font-size:11px;"><?php echo $company_name; ?></span></td>
                    <td style="padding-top:16px;"><strong><?php echo $location; ?></strong><br><span style="font-size:11px;"><?php echo $job_time; ?></span></td>
                    <td style="padding-top:24px;"><strong><?php echo $job_date; ?></strong></td>
                    <td style="padding-top:20px;" align="center"><button onclick="location.href='<?php echo $cta_link; ?>'" style="background-color:#ea9732; border-color:#ea9732;" class="btn btn-primary btn-md" data-title="Edit" data-toggle="modal" data-target="#edit" ><strong><?php echo $cta_link_text; ?></strong></button></td>
                </tr>
                    
            <?php
        endwhile;
        // Pagination
        echo paginate_links(
            array(
                'base'    => get_permalink() . '%#%' . '/',
                'format'  => '?page=%#%',
                'current' => $page,
                'total'   => $pages,
            )
        );
        ?>
    <?php else : ?>
    No jobs found
    <?php endif; ?>
    
    </tbody>
</table>

Answer 1

You should move the pagination outside of the table and probably rearrange your if, else and while statements.

<?php
$page = get_query_var('page') ?: 1;

// Variables
$row           = 0;
$jobs_per_page = 12; // How many jobs to display on each page
$jobs          = get_field('job_list');
$total         = count($jobs);
$pages         = ceil($total / $jobs_per_page);
$min           = (($page * $jobs_per_page) - $jobs_per_page) + 1;
$max           = ($min + $jobs_per_page) - 1;
// ACF Loop
if (have_rows('job_list')) :
?>
<table id="mytable" class="table table-bordred table-striped">
    <tbody>   
    <?php
    while (have_rows('job_list')) :
        the_row();
        $row++;
        // set repeater variables
        $image         = get_sub_field('image');
        $job_title     = get_sub_field('job_title');
        $company_name  = get_sub_field('company_name');
        $location      = get_sub_field('location');
        $job_time      = get_sub_field('job_time');
        $job_date      = get_sub_field('job_date');
        $cta_link_text = get_sub_field('cta_link_text');
        $cta_link      = get_sub_field('cta_link');
        // Ignore this job if $row is lower than $min
        if ($row < $min) {
            continue;
        }
        // Stop loop completely if $row is higher than $max
        if ($row > $max) {
            break;
        }
    ?>

        <tr>
            <td style="padding-top:20px; padding-bottom:20px;"><img src="<?php echo $image; ?>" /></td>
            <td style="padding-top:16px;"><strong><?php echo $job_title; ?></strong><br><span style="font-size:11px;"><?php echo $company_name; ?></span></td>
            <td style="padding-top:16px;"><strong><?php echo $location; ?></strong><br><span style="font-size:11px;"><?php echo $job_time; ?></span></td>
            <td style="padding-top:24px;"><strong><?php echo $job_date; ?></strong></td>
            <td style="padding-top:20px;" align="center"><button onclick="location.href='<?php echo $cta_link; ?>'" style="background-color:#ea9732; border-color:#ea9732;" class="btn btn-primary btn-md" data-title="Edit" data-toggle="modal" data-target="#edit"><strong><?php echo $cta_link_text; ?></strong></button></td>
        </tr>

    <?php endwhile; ?>
    </tbody>
</table>
<?php
// Pagination
echo paginate_links(
    array(
        'base'    => get_permalink() . '%#%' . '/',
        'format'  => '?page=%#%',
        'current' => $page,
        'total'   => $pages,
    )
);

else : ?>

<p>No jobs found</p>

<?php 
endif;

If you cant do that or you don’t want do that from some reason, wrap the pagination inside a table row and a data cell with colspan set to 4 to make it take all the table width

<tr>
    <td colspan="4">
        <?php echo paginate_links(array(
            'base'    => get_permalink() . '%#%' . '/',
            'format'  => '?page=%#%',
            'current' => $page,
            'total'   => $pages,
        )); ?>
    </td>
</tr>