Search – Ajax – Alter Query Parameters with Pagination

Too Long ; Didn’t Read

How do I get pagination to work when I’m creating my query with ajax?

I’m working on creating a functional search page that allows the user to filter how many posts per page. I don’t quite understand how to create it so pagination functions correctly and was hoping somebody could explain it to me. I understand that by creating a new query in my PHP ajax action I thus create new paging and do not alter the normal WP_Query, so I would need to make my pagination function with ajax but i’m not sure how I would connect it to a certain ajax custom query.

function implement_ajax() {

    $ppp = 10;
    if(isset($_GET['ppp']))
        $ppp = $_GET['ppp'];

    $search = $_GET['s'];           // Acquired and sent via ajax
    $paged = 1;
    if(isset($_GET['paged']))
        $paged = $_GET['paged'];

    $temp = new WP_Query(array('s' => $search, 'posts_per_page' => $ppp));

    $numPosts = $temp->post_count;
    $foundPosts = $temp->found_posts;
    $lastPage = $temp->max_num_pages;

    ob_start();
    if($temp->have_posts()) :
        $i = 0; 
    ?>
        <?php if($temp->max_num_pages > 1) : ?>
            <div class="pagination">
                <?php 
                    $big = 999999999;
                    echo paginate_links(array('base' => '/', 'format' => '?paged=%#%', 'current' => max( 1, get_query_var('paged') ), 'total' => $temp->max_num_pages)); 
                ?>
                <div class="clear"></div>
            </div> <!-- class="pagination" -->
        <?php endif; ?>

        <div id="postContainer">
            <?php while($temp->have_posts()) : 
                    $temp->the_post(); 
                    $i++; 
            ?>

                <div class="custom-post<?php echo ($i%2 == 0) ? ' even' : ''; echo ($i == $numPosts) ? ' last' : ''; echo ($i == 1) ? ' first' : ''; ?>">
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <?php the_excerpt(); ?>
                </div> <!-- class="custom-post" -->

            <?php endwhile; ?>
        </div> <!-- id="postContainer" -->

    <?php else : ?>
        <div id="postContainer">
            <div id="content">
                <p>No articles found.</p>
                <p><a href="<?php echo home_url(); ?>">Return Home</a></p>  
            </div> <!-- id="content" -->
        </div> <!-- id="postContainer" -->
    <?php endif;

    $htmlContent = ob_get_clean();
    echo $htmlContent;
    exit;
}
add_action('wp_ajax_nopriv_implement_ajax', 'implement_ajax');
add_action('wp_ajax_implement_ajax', 'implement_ajax');

The above returns the correct query – but pagination is broken since I’m not sure how to set the base parameter. I’ve tried ('/?s='.$search.'?paged='.$paged) and / and a few other ones that have gotten me nowhere. If I use the ‘Basic Example’ in The Codex: str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ) paginate_links return:

/wp-admin/admin-ajax.php?action=implement_ajax&ppp=1&s=web&paged=2

which does return the correct posts, minus the header, footer, and styles.

I tried to duplicate what G.M did in this question with localize script but couldn’t get past $args = (array) filter_var(INPUT_POST, 'query'); since parameter 2 was expecting an integer. I tried to just convert my $_POST[‘query’] to an array but wasn’t able to do so.

Relevant File Pastebins:

1. Search Page
2. Relevant Functions
3. Ajax Jquery

Warning – there may be some relics in there, I’ve been commentings things in and out to try and get this to work.