分页不工作AJAX请求

Question

I want to make a pagination of the results of the AJAX request. Pagination does not work. After clicking the page number, only the address and everything (example: / page / 3 /) change. Where did I make a mistake?

PAGE.PHP

<div class="site-content clearfix">
       <h1>Alex Blog</h1>
        <?php
          $ourCurrentPage = get_query_var('paged');
          $aboutPosts = new WP_Query(array(
            'post_type' => 'tour',
              'post_status' => 'publish',
              'posts_per_page' => 3,
          ));

          if ($aboutPosts->have_posts()) :
            while ($aboutPosts->have_posts()) :
              $aboutPosts->the_post();
              ?> 
        <span> <?php the_title(); ?> </span>
                  <br>

  <?php endwhile;
            echo paginate_links(array(
              'total' => $aboutPosts->max_num_pages
            ));

          endif;
   ?>   
</div>

FUNCTION.PHP

function tourcat_ajax_by_order() { if (isset($_REQUEST)) {
    $posts_per_page = et_get_option( 'divi_archivenum_posts' ) ;
        $args = array(              // WP query args
              'post_type' => 'tour',
              'post_status' => 'publish',
              'posts_per_page' => $posts_per_page
          );
     $tour_query = new WP_Query($args);
       if ( $tour_query->have_posts() ) {  // Have posts start here
        while ( $tour_query->have_posts() ) {   // While starts here
            $tour_query->the_post();
          ?>
                  <span> <?php the_title(); ?> </span>
                  <br>
          <?php}   
echo paginate_links(array(
              'total' => $aboutPosts->max_num_pages
            ));}  
            else {
            echo 'No results found';}
     wp_reset_postdata();}
           die();}

JS CODE

function tourcat_orderby_posts() {
         $.ajax({
                url: ajaxurl,
                data: {
                    'action':'tourcat_ajax_by_order',  
                },
                success: function(data) {
                    // This outputs the result of the ajax request 
                    $(".tour_parent_div").html(data);  
                },
                error: function(errorThrown) {}
            });}

Answer 1

This is not not implemented correctly, you can try the following:

PAGE.PHP

Use the same markup and call after adding a wrapper to the content:

<div class="site-content clearfix">
       <h1>Alex Blog</h1>
       <div id="page-posts-wrapper">
        <?php
          $ourCurrentPage = get_query_var('paged');
          $aboutPosts = new WP_Query(array(
            'post_type' => 'tour',
              'post_status' => 'publish',
              'posts_per_page' => 3,
          ));

          if ($aboutPosts->have_posts()) :
            while ($aboutPosts->have_posts()) :
              $aboutPosts->the_post();
              ?> 
        <span> <?php the_title(); ?> </span>
                  <br>

  <?php endwhile;
            echo paginate_links(array(
              'total' => $aboutPosts->max_num_pages
            ));

          endif;
   ?>   
       </div>
</div>

FUNCTION.PHP

Load js file and localize query data to use later for page generation:

function custom_assets_39828328() {
        // Correct the path and js file name before using.
        wp_enqueue_script( 'ajax-pagination',  get_stylesheet_directory_uri() . '/js/ajax-pagination.js', array(), '1.0', true );

        global $wp_query;
        wp_localize_script( 'ajax-pagination', 'ajaxpagination', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'query_vars' => json_encode( $wp_query->query )
        ));
}

add_action( 'wp_enqueue_scripts', 'custom_assets_39828328' );

Write the callback function that will be used when browsing the pages:

/**
 * AJAX Pagination function
 */
function my_ajax_pagination_72372732() {

    $query_vars = json_decode( stripslashes( $_POST['query_vars'] ), true );


    $query_vars['post_type'] = 'tour';
    $query_vars['paged'] = $_POST['page'];
    $query_vars['post_status'] = 'publish';
    $query_vars['posts_per_page'] = 3;


    $posts = new WP_Query( $query_vars );
    $GLOBALS['wp_query'] = $posts;


    if( ! $posts->have_posts() ) { 
        echo 'No results found';
    }
    else {
        while ( $posts->have_posts() ) { 
            $posts->the_post();
            ?>
                <span> <?php the_title(); ?> </span><br>      
            <?php

        }
            echo paginate_links(array('total' => $posts->max_num_pages  ));
    }

    die();
}
add_action( 'wp_ajax_nopriv_ajax_pagination', 'my_ajax_pagination_72372732' );
add_action( 'wp_ajax_ajax_pagination', 'my_ajax_pagination_72372732' );

JS Code

Pass the necessary details through Ajax to the call function and display response:

(function($) {
    function find_page_number(element) {
        element.find('span').remove();
        return parseInt(element.html());
    }
    $(document).on('click', 'a.page-numbers', function(event) {
        event.preventDefault();
        page = find_page_number($(this).clone());
        $.ajax({
            url: ajaxpagination.ajaxurl,
            type: 'post',
            data: {
                action: 'ajax_pagination',
                query_vars: ajaxpagination.query_vars,
                page: page
            },
            success: function(html) {
                $('#page-posts-wrapper').empty();
                $('#page-posts-wrapper').append(html);
            }
        })
    })
})(jQuery);

You can also replace the ajax callback query args with this (optional):

$new_args = array(
      'post_type' => 'post',
      'post_status' => 'publish',
      'paged' => $_POST['page'],
      'posts_per_page' => 3,
 );

Will work in both cases.