在 Laravel 中,實現分頁的懶加載可以通過使用 AJAX 和 JavaScript 來完成。這里是一個簡單的實現方法:
public function fetchPosts(Request $request)
{
// 獲取當前頁碼,默認為1
$page = $request->input('page', 1);
// 從數據庫中獲取分頁數據
$posts = Post::paginate(10, ['*'], 'page', $page);
// 返回分頁數據
return response()->json($posts);
}
routes/web.php
文件中添加一個路由:Route::get('/fetch-posts', 'YourController@fetchPosts');
<div id="posts-container">
<!-- 分頁數據將在這里顯示 -->
</div><button id="load-more">加載更多</button>
$(document).ready(function () {
let currentPage = 1;
function fetchPosts() {
$.ajax({
url: '/fetch-posts',
type: 'GET',
data: {
page: currentPage + 1
},
success: function (response) {
if (response.data.length > 0) {
currentPage = response.current_page;
for (let post of response.data) {
$('#posts-container').append(`
<div class="post">
<h3>${post.title}</h3>
<p>${post.content}</p>
</div>
`);
}
} else {
$('#load-more').hide();
}
}
});
}
// 初始化加載第一頁數據
fetchPosts();
// 點擊按鈕加載更多數據
$('#load-more').on('click', function () {
fetchPosts();
});
});
</script>
這樣,當用戶點擊 “加載更多” 按鈕時,將會通過 AJAX 請求獲取下一頁的分頁數據,并將其添加到容器中。當沒有更多數據時,按鈕將被隱藏。