Wordpress Category Post Ajax Pagination

I'm really struggling to find a way to create pagination with ajax for my Wordpress posts. The solutions that I have found do not work. To be more informative about this here is a

Solution 1:

What you need to do is to prevent default on the pagination links, and send an AJAX request to get the posts. Wordpress works in this way for AJAX: you send all your requests to wp-admin/admin-ajax.php with an action parameter that will identify the request in order to catch it in functions.php using wp_ajax_nopriv_my_action and wp_ajax_my_action hooks.

So basically you will do this in your template file:

<scripttype="text/javascript">jQuery(document).ready(function($) {
        $('.pagination a').click(function(e) {
            e.preventDefault(); // don't trigger page reloadif($(this).hasClass('active')) {
                return; // don't do anything if click on current page
            }
            $.post(
                '<?phpecho admin_url('admin-ajax.php'); ?>', // get admin-ajax.php url
                {
                    action: 'ajax_pagination',
                    page: parseInt($(this).attr('data-page')), // get page number for "data-page" attribute
                    posts_per_page: <?phpecho get_option('posts_per_page'); ?>
                },
                function(data) {
                    $('#content-posts').html(data); // replace posts with new one
                }
            });
        });
    });
</script>

You'll have to change classes names / attributes etc depending of your template.

And on the functions.php side:

functionmy_ajax_navigation() {
    $requested_page = intval($_POST['page']);
    $posts_per_page = intval($_POST['posts_per_page']) - 1;
    $posts = get_posts(array(
        'posts_per_page' => $posts_per_page,
        'offset' => $page * $posts_per_page
    ));
    foreach ($postsas$post) {
        setup_postdata( $post );
        // DISPLAY POST HERE// good thing to do would be to include your post template
    }
    exit;
}
add_action( 'wp_ajax_ajax_pagination', 'my_ajax_navigation' );
add_action( 'wp_ajax_nopriv_ajax_paginationr', 'my_ajax_navigation' );

The thing is to query the posts of the page requested (so we calculate the offset from the page number and the posts per page option), and display them with the template you use for single posts.

You may want to manipulate the browser history too, for that you should check on the History API.

Solution 2:

filter.js file

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


    functionpost_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 file

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);?>
    <?phpif ( $posts->have_posts() ) :?><?phpwhile ($posts->have_posts()) : $posts->the_post(); ?><?phpecho$post->post_title; ?><?phpendwhile;?><?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();  ?><?phpelse:?><divclass="no-post-cover"><divclass="container"><h1class="has-no-post-list">Posts Not Found</h1></div></div><?phpendif;?><?phpdie(1);
}