duanpacan2583 2018-04-09 10:41
浏览 84
已采纳

分页不工作AJAX请求

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) {}
            });}
  • 写回答

2条回答 默认 最新

  • dpdrtj1075 2018-04-09 12:43
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 php 将rtmp协议转hls协议,无法播放
  • ¥15 miniconda安装不了
  • ¥20 python代码编写
  • ¥20 使用MPI广播数据遇到阻塞
  • ¥15 TinyMCE如何去掉自动弹出的“链接…”工具?
  • ¥15 微信支付转账凭证,如何解决
  • ¥15 在win10下使用指纹登录时,界面上的文字最后一个字产生换行现象
  • ¥20 使用AT89C51微控制器和MAX7219驱动器来实现0到99秒的秒表计数,有开始和暂停以及复位功能,下面有仿真图,请根据仿真图来设计c语言程序
  • ¥15 51单片机 双路ad同步采样
  • ¥15 使用xdocreport 生成word