我想创建一个AJAX数字分页。并在网站中找到代码。And it works perfectly at first click event, but on the second click it doesn\'t. 如果我在第4页中单击分页,它会工作得很好(And doesn\'t load page, because of ajax)
实例com/page/4/
但是在第一次单击之后,如果我单击分页上的第5页链接,the whole page loads (not as expected in ajax) will go to a blank page url为:
实例com/wp-admin/admin-ajax。php/page/3/
php代码TwentyFifteen Child theme\'s函数。php
if ( !function_exists( \'custom_style_script_enqueue\' ) ) :
function custom_style_script_enqueue() {
global $wp_query;
wp_enqueue_style( \'custom-stylesheet\', get_theme_file_uri( \'css/custom-style.css\' ), array( \'\' ), filemtime( get_theme_file_path( \'css/custom-style.css\' ) ), \'all\' );
if ( ! wp_script_is( \'jquery\', \'enqueued\' ) ) {
wp_enqueue_script( \'jquery\' );
}
wp_register_script( \'custom-ajax-jscript\', get_theme_file_uri( \'js/custom-ajax-jscript.js\' ), array( \'jquery\' ), filemtime( get_theme_file_path( \'js/custom-ajax-jscript.js\' ) ), false );
wp_localize_script( \'custom-ajax-jscript\', \'ajaxpaginationobject\', array(
\'ajax_url\' => admin_url( \'admin-ajax.php\' ),
\'query_vars\' => json_encode( $wp_query->query )
) );
wp_enqueue_script( \'custom-ajax-jscript\' );
}
add_action( \'wp_enqueue_scripts\', \'custom_style_script_enqueue\' );
endif;
if ( !function_exists( \'my_ajax_custom_pagination\' ) ) :
function my_ajax_custom_pagination() {
$query_vars = json_decode( stripslashes( $_POST[\'query_vars\'] ), true );
$query_vars[\'post_type\'] = \'post\';
$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;
add_filter( \'editor_max_image_size\', \'my_image_size_override\' );
if ( ! $posts->have_posts() ) {
get_template_part( \'content\', \'none\' );
} else {
while( $posts->have_posts() ) {
$posts->the_post();
get_template_part( \'content\', get_post_format() );
}
}
wp_reset_postdata();
remove_filter( \'editor_max_image_size\', \'my_image_size_override\' );
the_posts_pagination( array(
\'prev_text\' => __( \'Previous page\', \'twentyfifteen\' ),
\'next_text\' => __( \'Next page\', \'twentyfifteen\' ),
\'before_page_number\' => \'<span class="meta-nav screen-reader-text">\' . __( \'Page\', \'twentyfifteen\' ) . \'</span>\',
) );
die();
function my_image_size_override() {
return array( 825, 510 );
}
}
add_action( \'wp_ajax_ajax_paginaton\', \'my_ajax_custom_pagination\' );
add_action( \'wp_ajax_nopriv_ajax_paginaton\', \'my_ajax_custom_pagination\' );
endif;
和JS文件自定义ajax jscript。js公司
jQuery(document).ready(function($){
function find_page_number( element ) {
element.find(\'span\').remove();
return parseInt( element.html() );
}
// $( ".nav-links a" ).click( function(e) {
// $(document).on( \'click\', \'.nav-links a\', function(e) {
$( "nav.navigation" ).on( "click", ".nav-links a", function(e) {
e.preventDefault();
page = find_page_number( $(this).clone() );
$.ajax({
url: ajaxpaginationobject.ajax_url,
// type: \'POST\', // I\'ll use \'method\' instead of \'type\' because my jquery version is NOT PRIOR then 1.9.0
method: \'POST\',
data: {
action: \'ajax_paginaton\',
query_vars: ajaxpaginationobject.query_vars,
page: page
},
beforeSend: function() {
$(\'#main\').find( \'article\' ).remove();
$(\'#main nav\').remove();
$(document).scrollTop();
$(\'#main\').append( \'<div class="page-content" id="loader">Loading New Posts...</div>\' );
},
success: function( html ) {
$(\'#main #loader\').remove();
$(\'#main\').append( html );
}
});
});
});
为什么第二次单击不起作用并包含一些额外的部分
(/wp-admin/admin-ajax.php/)
在页面链接的中间?
请帮我解决这个问题。