โซลูชัน Ajax + ก้อน + เซสชัน + Lazyload + การแบ่งหน้า + ฝีปาก + เบลด
รับผลิตภัณฑ์ทั้งหมด กำหนดจำนวนรายการสำหรับแต่ละชิ้น (เช่นการแบ่งหน้า) และเก็บไว้ในเซสชัน (เราเก็บชิ้นส่วนไว้ในเซสชันดังนั้นเมื่อคำขอ 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 แบบอักษรสิ้นสุด : เมื่อเพจถูกเลื่อนไปที่ด้านล่างของหน้า หน้าตัวแปรจะเพิ่มขึ้นอัตโนมัติและขอแบ็กเอนด์สำหรับผลิตภัณฑ์เพิ่มเติม หากมีการคืนสินค้าเพิ่ม สินค้าจะผนวกสินค้าเข้ากับองค์ประกอบด้วย 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