Решение Ajax + фрагмент + сеанс + отложенная загрузка + разбиение на страницы + красноречивый + блейд
получить все продукты, установить количество элементов для каждого фрагмента (например, разбить на страницы) и сохранить его в сеансе (мы сохраняем фрагменты в сеансе, поэтому, когда приходит запрос 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
ajax-вызов font-end: когда страница прокручивается до нижней части страницы, переменная page будет автоматически увеличиваться и запрашивать у бэкэнда больше продуктов. если возвращается больше продуктов, он добавит продукты к элементу с 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