时间戳

首页 > 解决方案 > Ajax 加载更多 - 如果没有更多内容，则隐藏按钮

jquery - Ajax 加载更多 - 如果没有更多内容，则隐藏按钮

问题描述

我有一个 WordPress 查询（自定义帖子类型），并希望用户使用“加载更多”按钮（Ajax）加载更多文章。为了在没有更多帖子时隐藏加载更多按钮，我添加了一个“else if”功能：

var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
$('.loading').hide();
jQuery(function($) {
$('body').on('click', '.loadmore', function(e) {
    $('.loadmore').hide();
    $('.loading').show();
    var data = {
        'action': 'load_posts_by_ajax',
        'page': page,
        'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
    };

    $.post(ajaxurl, data, function(response) {
        if(response != '') {
            $('.ajax-posts').append(response);
            $('.loadmore').show();
            $('.loading').hide();
            page++;
        } else if(response == 0) {
            $(".ajax-posts").append("No More Records Found");
            $('.loading').hide();
        }
    });
});
});

问题是该按钮仅在单击时隐藏：

} else if(response == 0) {

但是我想在没有更多帖子加载时自动隐藏按钮。所以我必须做类似的事情

} else if(response == 'last posts to load') {

知道怎么做吗？

编辑 - 这是查询：

add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 
'load_posts_by_ajax_callback');

function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$date_now = date('Y-m-d H:i:s');
$paged = $_POST['page'];
$args = array(
    'posts_per_page'    => 2,
    'post_type'         => 'termin',
    'meta_query'        => array(
        'key'           => 'end_date',
        'compare'       => '>=',
        'value'         => $date_now,
        'type'          => 'DATETIME'
    ),
    'orderby'           => 'end_date',
    'order'             => 'ASC',
    'meta_type'         => 'DATE',
    'post_status'       => 'publish',
    'paged' => $paged,
);
$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
    ?>
    <?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>

    <?php include(get_template_directory().'/termine-ajax.php'); ?>

    <?php endwhile; ?>
    <?php
endif;

wp_die();
}

标签： jqueryajaxwordpress

解决方案

Wordpress 具有最大页码功能。你可以用那个。但首先，您需要使用按钮在页面上重复循环参数。第 1 步仅将您的 args 设置为一个函数，没有分页部分（否则会出现错误）。

function ajax_args() {
$date_now = date('Y-m-d H:i:s');
$paged = $_POST['page'];
$args = array(
'posts_per_page'    => 2,
'post_type'         => 'termin',
'meta_query'        => array(
    'key'           => 'end_date',
    'compare'       => '>=',
    'value'         => $date_now,
    'type'          => 'DATETIME'
),
'orderby'           => 'end_date',
'order'             => 'ASC',
'meta_type'         => 'DATE',
'post_status'       => 'publish',
'paged' => $paged,
);

return $args;
}

第 2 步 - 调整您的 load_posts_by_ajax_callback() 函数以加载前一个函数并将分页部分添加到其中

function load_posts_by_ajax_callback() {

check_ajax_referer('load_more_posts', 'security');

$paged = $_POST['page'];
$args = ajax_args();
$args += array('paged' => $paged,);

$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
?>
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>

<?php include(get_template_directory().'/termine-ajax.php'); ?>

<?php endwhile; ?>
<?php
endif;

wp_die();

}

然后第 3 步 - 使用您的 ajax 代码所在的位置，您可以再次调用原始循环（无需重复自己，这就是我们将其设置为单独函数的原因）并使用 $loop->max_num_pages 从中获取最大页面；并使用带有 page 变量的 if 语句将其隐含到 ajax 中。例如 if(page == max_num_pages; ?>) 在响应内部和页面之前++

<?php $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

$args = ajax_args();

$args  += array(
    'paged' => $paged,
);

$loop = new WP_Query($args); 
$last_page = $loop->max_num_pages;
?>

var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
$('.loading').hide();
jQuery(function($) {
$('body').on('click', '.loadmore', function(e) {
$('.loadmore').hide();
$('.loading').show();
var data = {
    'action': 'load_posts_by_ajax',
    'page': page,
    'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
};

$.post(ajaxurl, data, function(response) {
    if(response != '') {
        $('.ajax-posts').append(response);
        $('.loadmore').show();
        $('.loading').hide();

if(page == <?php echo $last_page; ?>) {

            $('.loadmore').hide(); 
  }
        page++;

    } else if(response == 0) {
        $(".ajax-posts").append("No More Records Found");
        $('.loading').hide();
    }
  });
 });
});

推荐阅读