Solusi Ajax + potongan + sesi + pemuatan lambat + penomoran halaman + fasih + blade
dapatkan semua produk, atur jumlah item untuk setiap potongan (seperti paginasi) dan simpan ke dalam sesi (kami menyimpan potongan ke dalam sesi sehingga ketika permintaan ajax masuk, ia tidak akan memanggil $products = Product::inRandomOrder()->get();
lagi), potongan pertama akan menjadi pagination pertama
ketika ajax meminta lebih banyak produk, ia akan mendapatkan produk dari sesi dan mendapatkan potongan produk yang benar berdasarkan nomor halaman yang diminta ajax.
jika tidak ada potongan lagi, kembalikan saja tanpa produk apa pun
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'));
produk.blade.php : halaman utama
@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 : menampilkan produk
@foreach($products as $product)
<div>
<p>Display your products here</p>
</div>
@endforeach
panggilan ajax font-end : ketika halaman digulir ke bawah halaman, halaman variabel akan bertambah secara otomatis dan meminta backend untuk lebih banyak produk. jika lebih banyak produk yang dikembalikan, produk tersebut akan ditambahkan ke elemen dengan id = "daftar produk" di produk.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