Кнопка "Показать ещё" на aJax

Question

Необходимо сделать кнопку, которая бы подгружала следующую партию новостей. Нечто подобное я уже сделал по уроку, работает это дело на ajax, который цепляет данные из data.html, но проблема в том, что новости нужно выводить упорядоченно и по 6 штук, а не все сразу. Помогите доработать пожалуйста.

$(function(){
    $('.load-more').on('click',function(){
        const btn = $(this);
        $.ajax({
            url: './data.html',
            type: 'GET',
            beforeSend: function(){
                btn.attr('disabled', true);
            },
            success: function(responce){
                $('.after-posts').before(responce);
                btn.attr('disabled', false);
            },
            error: function(){
                btn.attr('disabled', false);
                alert('Error!');
            }
        });
    });
});

<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>
<div class="col-12 col-md-6 col-xl-4">Новость</div>

БЛОГ НА HUSL

Кнопка "Показать ещё" на aJax

Ответы (0 шт):