Laravel分页样式如何实现懒加载

在 Laravel 中，实现分页的懒加载可以通过使用 AJAX 和 JavaScript 来完成。这里是一个简单的实现方法：

1. 首先，在控制器中创建一个分页数据的方法：

public function fetchPosts(Request $request) {     // 获取当前页码，默认为1     $page = $request->input('page', 1);      // 从数据库中获取分页数据     $posts = Post::paginate(10, ['*'], 'page', $page);      // 返回分页数据     return response()->json($posts); } 

2. 在 routes/web.php 文件中添加一个路由：

Route::get('/fetch-posts', 'YourController@fetchPosts'); 

3. 在视图文件中，创建一个容器来显示分页数据，并添加一个按钮来触发懒加载：

<div id="posts-container">     <!-- 分页数据将在这里显示 --> </div><button id="load-more">加载更多</button> 

4. 使用 JavaScript（例如 jQuery）编写 AJAX 请求来获取分页数据，并在成功后将数据添加到容器中：

    $(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 请求获取下一页的分页数据，并将其添加到容器中。当没有更多数据时，按钮将被隐藏。