Вывожу посты по клику с помощью аякса. На странице у меня есть пагинация. Общее количество постов у меня 11 на данный момент. 10 постов на первой странице, а остальной на второй. По клику на кнопку, мне нужно подгрузить посты следующих страниц.
Но, он мне подгружает 10,8,6,4,2 пост… Почему так происходит?
Возможно я как-то неправильно обрабатываю код php?
Вот мои коды:
JS
const loadMoreBtn = document.querySelector('#loadmore');
const postContainer = document.querySelector('#post-container');
window.addEventListener('load', function () {
if (loadMoreBtn) {
loadMoreBtn.addEventListener('click', function () {
const customAction = 'loadmore';
const sendType = 'POST';
let postData = new FormData();
postData.append('action', customAction);
postData.append('query', post_data);
postData.append('paged', current_page);
const xhr = new XMLHttpRequest();
xhr.open(sendType, ajaxurl);
this.innerText = 'Посты загружаются...';
this.disabled = true;
xhr.addEventListener('readystatechange', function (data) {
if (this.readyState === 4 && this.status === 200) {
console.log(data);
postContainer.innerHTML = data.target.responseText;
loadMoreBtn.innerText = 'Загрузить еще';
loadMoreBtn.disabled = false;
current_page++;
console.log(current_page);
if (current_page >= max_pages) {
loadMoreBtn.remove();
}
}
});
xhr.send(postData);
})
}
})
PHP
function loadmore_get_posts(){
$data = json_decode(stripslashes($_POST['query']));
$data['paged'] = $_POST['paged'];
query_posts($data);
if(have_posts()) :
while(have_posts()): the_post();
the_post();?>
<div class="news__table-item">
<div class="news__table-img-container">
<img src="<?php the_post_thumbnail_url(); ?>" alt="Картинка новости" class="news__table-img">
</div>
<div class="news__table-content">
<span class="news__table-category">
<?php
foreach((get_the_category()) as $category) {
echo $category->cat_name . ' ';
}
?>
</span>
<a href="<?php the_permalink(); ?>" class="news__table-title">
<?php the_title(); ?>
</a>
<p class="news__table-desc">
<?php the_content(); ?>
</p>
<div class="news__table-date">
<?php the_date(); ?>
</div>
</div>
</div>
<?php
endwhile;
endif;
wp_die();
}
add_action('wp_ajax_loadmore', 'loadmore_get_posts');
add_action('wp_ajax_nopriv_loadmore', 'loadmore_get_posts');
SCRIPT
<script>
let ajaxurl = '<?php echo admin_url('admin-ajax.php') ?>';
let current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
let max_pages = <?php echo $custom_query->max_num_pages ?>;
let post_data = <?php echo json_encode($custom_query->query_vars); ?>;
</script>
