پیاده سازی صفحه بندی در لاراول باajax

با سلام میخواستم بدونم پجنیت یا صفحه بندی چطور میشه با لاراول پیاده سازی کردمن یه تابع load ajax دارم منتها قسمت صفحه بندیشو نمیدونم چطوری طراحی کنم.اگه کسی هم اطلاعاتی در مورد اینکه آیا لاراول راه خاصی برای کار با ajax داره یا اطلاعاتی در مورد pjax داره ممنون میشم بهم بگه؟

    function loadajax(){
        var e = document.getElementById("sort1");
        var sort = e.options[e.selectedIndex].value;
        var url ='http://localhost:8000/api/products/index/'+sort+'/1';

        request = new XMLHttpRequest();
        request.open('GET','http://localhost:8000/api/products/index/'+sort+'/1',true);
        request.onreadystatechange = function(){
        if(request.readyState == 4 && request.status == 200){
            console.log(request);
            var products = JSON.parse(request.responseText);        
            html = '';

            products.data.forEach(product => {
            html += '<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">';
            html += '<div class="books-item">';
            html += '<div class="books-item-thumb">';
            html += '<img src="{{url("img/book2.png")}}" alt="book">';
            html += '<div class="new">New</div>';
            html += '<div class="sale">Sale</div>';
            html += '<div class="overlay overlay-books"></div>';
            html += '</div>';
            html += '<div class="books-item-info">';
            html += '<div class="books-author">Samuel Peterson</div>';
            html += '<h5 class="books-title">'+product.name+'</h5>';
            html += '<div class="books-price">'+product.min_price+'ریال</div>';
            html += '</div>';
            html += "<a href='{{route('front.shop.show',"1")}}' class='btn btn-small btn--dark add'>";
            html += "<span class='text'>بیشتر</span>";
            html += '<i class="seoicon-commerce"></i>';
            html += '</a>';
            html += '</div>';
            html += '</div>';

        });
        var start = (products.meta.from) * (products.meta.per_page) - (products.meta.per_page) +1;
        var end = (products.meta.from) * (products.meta.per_page);
        var info = 'نشان دهنده: <span>'+end+'-'+start+'</span> از <span>'+products.meta.total+'</span>نتیجه ';
        document.getElementById('info').innerHTML= info;      

        document.getElementById('products').innerHTML= html;    
        }
    }
    request.send();