WordPress AJAX admin-ajax.php Pagination

Question

I am at a wall here. I am updating my search result using ajax like so :

function ajax_search_enqueues() {
if ( is_search() ) {
    wp_enqueue_script( 'ajax-search', get_stylesheet_directory_uri() . '/js/custom/ajax-search.js', array( 'jquery' ), '1.0.0', true );
    wp_localize_script( 'ajax-search', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
}

add_action( 'wp_enqueue_scripts', 'ajax_search_enqueues' );

I am triggering the ajax call on an input change with this

jQuery('input[type="checkbox"]').on( 'change', function() {

    var cat = jQuery(this).attr('name');

    if (this.checked) {
        cats.push(cat);
    } else {
        cats.splice(cats.indexOf(cat), 1);
    }

    jQuery.ajax({
        type: 'GET',
        url: myAjax.ajaxurl,
        data: {
            action: 'load_search_results',
            categories: cats,
            s: s
        },
        success: function( data ) {
            jQuery( ".content").empty().append( data );
            console.log(data);
        }
    });

} );

add_action( 'wp_ajax_load_search_results', 'load_search_results' );

add_action( 'wp_ajax_nopriv_load_search_results', 'load_search_results' ); add_action( 'genesis_after_content', 'breed_posts_nav' );

and calling the functions like so

function load_search_results() {
get_template_part( 'loop', 'grid' );

$args = array(
    'post_type' => 'post',
    's' => $_GET['s'],
    'category__in' =>$_GET['categories'],
    'posts_per_page' => 12,
);

// doing loop stuff 

die();
}

I am retrieving all information properly besides pagination. The reason pagination breaks is because I am filtering by category. So on the left hand side I have category checkboxes and when a checkbox is changed it triggers the ajax request. I can get the pagination to update but when clicking on the page number the url is directed to http://dev:8888/wp-admin/admin-ajax.php?action=load_search_results/blah/blah/blah this breaks the page and is no longer on the search.php page. Is there a way to use pagination using ajax? Any help would be appreciated.

Answer 1

filter.js
---------
$('#post-category').change(function(){
        category = $(this).find('.selected').text();
        postType = $('#search-form-type').val();
        post_filter();
    });


function post_filter(paged){
        $.ajax(
            {
                url:ajaxUrl,
                type:"POST",
                data: {action:"get_post_category","category":category,'search':search, 'postType':postType, 'paged': paged},
                success: function(response) {
                $('#blog-post-cover').html(response);
            }
        });
    }

    $('#blog-wrapper').on('click','#pagination a',function(e){
        e.preventDefault();     
        if ($(this).hasClass('prev')||$(this).hasClass('next')) {
            paginateNum = $(this).find('.prev-next').data('attr');
            post_filter(paginateNum);
        }
        else{
            paginateNum = $(this).text();
            post_filter(paginateNum);
        }
        $("html, body").animate({ scrollTop: 0 }, "slow");
    });
    postType = $('#search-form-type').val();
    post_filter(1);

function.php
------------

/*  ==========================================================================
     Blog filter
    ========================================================================== */

    add_action( 'wp_ajax_nopriv_get_post_category', 'post_category' );
    add_action( 'wp_ajax_get_post_category', 'post_category' );   
    function post_category() {
        $post_type = $_POST['postType'];      
        $category = $_POST['category'];
        $search = $_POST['search'];
        $paged = ($_POST['paged'])? $_POST['paged'] : 1;
        if($post_type==="resource-center"):
            $taxonomy ="resource-center-taxonomy";
        else:
            $taxonomy ="category";
        endif;
        if($category):
            $args = array(
                'post_type'         => $post_type,
                'post_status'       => 'publish',
                'tax_query' => array(
                    array(
                        'taxonomy' => $taxonomy,
                        'field'    => 'slug',
                        'terms'    => $category,
                    ),
                ),
                'posts_per_page'    => 5,
                'order'             => 'ASC',
                's'                 => $search,
                'paged'             => $paged
            );
        else:
            $args = array(
                'post_type'         => $post_type,
                'post_status'       => 'publish',
                'posts_per_page'    => 5,
                'order'             => 'ASC',
                's'                 => $search,
                'paged'             => $paged
            );
        endif;

        $posts = new WP_Query($args);?>
        <?php if ( $posts->have_posts() ) :?>
            <?php while ($posts->have_posts()) : $posts->the_post(); ?>
        <?php echo $post->post_title; ?>
            <?php endwhile;?>
            <?php
                $nextpage = $paged+1;
                $prevouspage = $paged-1;
                $total = $posts->max_num_pages;
                $pagination_args = array(
                'base'               => '%_%',
                'format'             => '?paged=%#%',
                'total'              => $total,
                'current'            => $paged,
                'show_all'           => false,
                'end_size'           => 1,
                'mid_size'           => 2,
                'prev_next'          => true,
                'prev_text'       => __('<span class="prev-next" data-attr="'.$prevouspage.'">&laquo;</span>'),
                'next_text'       => __('<span class="prev-next" data-attr="'.$nextpage.'">&raquo;</span>'),
                'type'               => 'plain',
                'add_args'           => false,
                'add_fragment'       => '',
                'before_page_number' => '',
                'after_page_number'  => ''
            );
            $paginate_links = paginate_links($pagination_args);

            if ($paginate_links) {
                echo "<div id='pagination' class='pagination'>";
                echo $paginate_links;
                echo "</div>";
            }?>
            <?php wp_reset_query();  ?>
        <?php else:?>           
           <div class="no-post-cover">
                <div class="container">         
                   <h1 class="has-no-post-list">Posts Not Found</h1>
                </div>
            </div>
       <?php endif;?>         
       <?php die(1);
    }