如何根据 AJAX 请求更新分页

Question

我有一个在 Shop Woocommerce 页面上呈现分页的功能。并且有一个 AJAX 处理程序。当您单击箭头时，页面应使用 AJAX 进行更改。问题是，当我转到下一页时，$current_page 的值没有改变，分页仍然与第一页相同，即禁用后退按钮。如何在 AJAX 请求中更新 $current_page 的值以更改分页？ 我的函数.php:

//Custom pagination

function custom_woocommerce_pagination()
{
    global $wp_query;

    // Get the total number of products
    $total_products = $wp_query->found_posts;

    // Determine current page and number of pages
    $current_page = max(1, get_query_var('paged'));
    $per_page = apply_filters('loop_shop_per_page', wc_get_default_products_per_row() * wc_get_default_product_rows_per_page());
    $num_pages = ceil($total_products / $per_page);

    // Define inactive class for arrows
    $inactive_class = 'pagination__arrow--inactive';

    // Start building the HTML for the pagination
    $pagination_html = '<div class="pagination__arrows">';

    if ($current_page > 1) {
        // Add HTML for previous arrow with link
        $pagination_html .= '<a href="#" class="pagination__arrow" data-page="' . ($current_page - 1) . '">
...
    </a>';
    } else {
        // Add HTML for inactive previous arrow
        $pagination_html .= '<span class="pagination__arrow ' . $inactive_class . '">
...
    </span>';
    }

    // Add HTML for page count
    $pagination_html .= '<p>' . sprintf(__('%d of %d', 'rl-woocommerce'), $current_page, $num_pages) . '</p>';

    if ($current_page < $num_pages) {
        // Add HTML for next arrow with link
        $pagination_html .= '<a href="#" class="pagination__arrow forward" data-page="' . ($current_page + 1) . '">
...
        </a>';
    } else {
        // Add HTML for inactive next arrow
        $pagination_html .= '<span class="pagination__arrow forward ' . $inactive_class . '">
       ...
    </span>';
    }

    // Close the HTML for the pagination
    $pagination_html .= '</div>';

    return $pagination_html;
}

function pagination_handler()
{

    // Get the current page from the AJAX request
    $page = $_POST['page'];

    // Set up the query for the requested page
    $args = array(
        'post_type'      => 'product',
        'posts_per_page' => apply_filters('loop_shop_per_page', wc_get_default_products_per_row() * wc_get_default_product_rows_per_page()),
        'paged'          => $page,
    );
    $products = new WP_Query($args);

    // Start building the HTML for the product list
    ob_start();
    woocommerce_product_loop_start();
    while ($products->have_posts()) {
        $products->the_post();
        wc_get_template_part('content', 'product');
    }
    woocommerce_product_loop_end();
    wp_reset_postdata();
    $product_html = ob_get_clean();

    echo $product_html;
    exit;
}
add_action('wp_ajax_pagination_handler', 'pagination_handler');
add_action('wp_ajax_nopriv_pagination_handler', 'pagination_handler');

我的JS：

 // AJAX pagination
  let page = 1;

  $(document).on("click", ".pagination__arrow", function (e) {
    e.preventDefault();
    let newPage = $(this).data("page");
    if (newPage === page) {
      return false;
    }
    page = newPage;
    loadProducts();
  });

  function loadProducts() {
    $.ajax({
      url: siteAjax.ajaxurl,
      type: "POST",
      data: {
        action: "pagination_handler",
        page: page,
      },
      beforeSend: function () {
        $(".products").html('<div class="loading">Loading...</div>');
      },
      success: function (data) {
        $(".products").html(data);
      },
    });
  }