分页不起作用AJAX请求(Pagination not working AJAX request)
我想对AJAX请求的结果进行分页。 分页不起作用。 点击页码后,只有地址和所有内容(例如:/ page / 3 /)发生变化。 我在哪里犯了一个错误?
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代码
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) {} });}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) {} });}最满意答案
这不是没有正确实施,你可以尝试以下方法:
page.php文件
在将内容添加到内容后使用相同的标记和调用:
<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
加载js文件并将查询数据本地化以稍后用于页面生成:
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' );编写浏览页面时将使用的回调函数:
/** * 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代码
通过Ajax将必要的细节传递给调用函数并显示响应:
(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);你也可以用这个(可选的)替换ajax回调查询参数:
$new_args = array( 'post_type' => 'post', 'post_status' => 'publish', 'paged' => $_POST['page'], 'posts_per_page' => 3, );将在两种情况下工作。
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.
更多推荐
function,php,page,电脑培训,计算机培训,IT培训"/> <meta name="description
发布评论