Решение 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 call : когато страницата е превъртете до края на страницата, страницата с променливи автоматично ще се увеличи и ще поиска бекенд за повече продукти. ако се върнат повече продукти, той ще добави продуктите към елемент с 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