WordPress AJAX Pagination with query_posts

1 Views

I have a list checkbox categories, which when checked, use WordPress’s admin-ajax.php to filter posts to the selected category.

All is working great, however, I am struggling to get the updated pagination. I’m using query_posts as follows:

Read More
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$args= array
(
 'post_type'=>'course',
    'paged'=>$paged,
    'posts_per_page'=>3,
  'tax_query' => array(
     array(
    'taxonomy' => 'subject',
    'field' => 'slug',
    'terms' => $tags_from_group
    )
    )

);

$posts=query_posts( $args);

I then pass the $posts back as data, but I don’t know how to access the updated pagination..

I was thinking something along these lines: 

 $pagedposts=array();
 $pagedposts['posts']=$posts;
 $pagedposts['pagination']=???

So $pagedposts[‘pagination’] would be the data needed to update the old pagi after the ajax call is successful..

I found someone else had this problem here, but there is no solution there…

Post Views: 1

Related posts

1 comment

  1. In the end I found that it is not possible to update the pagination. The way I loaded the next lot of posts was by setting a post offset, and using a load more button.

    So in your ajax call where you are loading more posts, you need to pass over an offset value:

    $.ajax({
     url: '/wp-admin/admin-ajax.php', 
     type: "POST",
     data: {
            'action': 'filter_posts',
            'selected_options':selected_options,
            'offset':postoffset
       }//etc...

    Because this offset value will always change, you need to store the value in a variable. Above, I have used ‘postoffset’

    The way you need to determine the value of the offset is simple. You can just use jquery to count how many posts are currently on the page:

        var postoffset = $('.hentry').length;

    Where .hentry is the name of my post class.

    Once you receive the post offset in your php script, you can set it like so:

     $args= array
    (
        'offset'=>$offset,
        'post_type'=>$post_type,
        'paged'=>$paged,
        'posts_per_page'=>9,
        'orderby' => 'title',
        'order' => 'ASC'
    );

    and then plug that into your query_args (as well as determining the offset above, I have added a ‘posts_per_page’ option which lets me clearly see the extra 9 posts loaded, and my post offset increasing by 9 each time):

    $posts=query_posts( $args);

    To configure your load more button instead of using the pagination, you can just put a div or picture on your page, and give it an ID – for e.g.:

    <div id="load-more">LOAD MORE </div>

    and the jquery:

    function load_more_button_listener($){
 $('#load-more').click(function(event){
       event.preventDefault();
        var postoffset = $('.hentry').length;

 // console.log("offset: "+postoffset);

  //call the original ajax function to load more posts, with the new offset:
  load_more_posts($,postoffset);
 });  
}

Comments are closed.