Рішення Ajax + chunk + session + lazyload + paginate + eloquent + blade
отримати всі продукти, встановити кількість елементів для кожного блоку (наприклад, розбити на сторінки) і зберегти його в сесії (ми зберігаємо фрагменти в сеансі, щоб, коли надходить запит ajax, він не викликав $products = Product::inRandomOrder()->get();
знову), перший фрагмент буде першим розбиттям на сторінки
коли ajax запитує більше продуктів, він отримає продукти із сеансу та отримає правильну частину бази продуктів на номері сторінки, яку запитує ajax.
якщо шматків більше немає, просто поверніться без продуктів
if(!$request->ajax()){
$products = Product::inRandomOrder()->get();
$chunks = $products->chunk(4);
\Session::put('chunks',$chunks);
$products = $chunks[0];
}else{
$page = $request->all()['page'];
$chunks = \Session::get('chunks');
if(count($chunks)<$page){
\Session::forget('chunks');
return;
}else{
$products = $chunks[$page-1];
}
}
if ($request->ajax()) {
$view = view('product_lazyLoad',compact('products'))->render();
return response()->json(['html'=>$view]);
}
return view('products',compact('products'));
products.blade.php : головна сторінка
@if($products)
<ul class="row" id="productLists">
@include('product_lazyLoad')
</ul>
@endif
<!-- load records -->
<div class="col-12 ajax-load text-center" style="display:none">
<p><img src="/images/loader.gif">Loading More Products</p>
</div>
product_lazyload.blade.php : відображення продуктів
@foreach($products as $product)
<div>
<p>Display your products here</p>
</div>
@endforeach
font-end ajax виклик: коли сторінка прокручується донизу сторінки, змінна сторінка автоматично збільшуватиметься та запитуватиме бекенд для інших продуктів. якщо буде повернуто більше продуктів, вони будуть додані до елемента з id = "productlist" у products.blade.php
//lazy load
var page = 1;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height())
{
page++;
loadMoreData(page);
}
});
function loadMoreData(page){
$.ajax({
url: '?page=' + page,
type: "get",
beforeSend: function(){
$('.ajax-load').show();
}
}).done(function(data){
if(!data.html){
$('.ajax-load').html("No more records found");
$('.ajax-load').show();
return;
}
$('.ajax-load').hide();
$("#productLists").append(data.html);
}).fail(function(jqXHR, ajaxOptions, thrownError){
//error handle
});
}
person
Jason
schedule
17.12.2018