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