使用 Laravel 进行 AJAX 分页 [英] AJAX pagination with Laravel

问题描述

我有一个名为 posts.blade.php 的视图，它包含在 home.blade.php 中:

@foreach ($posts 作为 $post)<div class="list-item clearfix"><div class="内容"><img src="{{ URL::to($post->thumbnail) }}" alt=""/><h1>{{{ $post->title }}}</h1>
<div class="score">{{ $post->rating }}</div>

@endforeach<div id="pagination">{{{ $posts->links() }}}</div>

当用户搜索某些帖子时，控制器的postSearch() 函数返回一个 JSON 响应:

函数 postSearch(){$posts = $posts->select(...)->where(...)->orderBy(...)->paginate(5);//搜索帖子return Response::json(View::make('includes.posts', ['posts' => $posts])->render());}

并且 jQuery 将 HTML 附加到 #posts div 上:

$('#search').submit(function(e) {e.preventDefault();var form = $(this);$.post(form.attr('action'), form.serialize(), function(data) {$('#posts').html(data);});});

这很完美.但是现在当我点击分页链接时，页面会重新加载并且我的搜索结果消失了(很明显).我如何为这些帖子分页?我已经阅读了this，this 和 this 文章，但我不明白如何实现它.

编辑

到目前为止，这是我用于分页的 jQuery:

$('#posts').on('click', '.pagination a', function(e) {e.preventDefault();var url = $(this).attr('href'),page = url.split('page=')[1],数据 = $('#search').serializeArray();数据推送({页面:页面})；//添加页面变量以发布数据控制台日志(数据)；$.post($('#search').attr('action'), data, function(data) {$('#posts').html(data['posts']);});});

这是当我点击分页链接时正在发送的数据(第 2 页):

不幸的是没有任何反应，第 1 页的帖子继续显示.

解决方案

我对 Laravel 中的分页不是很熟悉，但从您列出的链接来看，它看起来并不太难.这段代码未经测试...

$('#pagination a').on('click', function(e){e.preventDefault();var url = $(this).attr('href');$.post(url, $('#search').serialize(), function(data){$('#posts').html(data);});});

更新

如果分页链接错误(就像 OP 的链接)，您必须自己构建 url.
只需获取您想要的 url 并将 ?page=#number 添加到它.

//page 是从原始链接中剥离的页码var url = $('#search').attr('action')+'?page='+page;

I have this view called posts.blade.php which gets included in home.blade.php:

<div id="posts">
    @foreach ($posts as $post)
        <div class="list-item clearfix">
            <div class="content">
                <img src="{{ URL::to($post->thumbnail) }}" alt="" />
                <h1>{{{ $post->title }}}</h1>
            </div>
            <div class="score">{{ $post->rating }}</div>
        </div>
    @endforeach
    <div id="pagination">{{{ $posts->links() }}}</div>
</div>

When a user searches for certain posts, the controller's postSearch() function returns a JSON response:

function postSearch() 
{
    $posts = $posts->select(...)->where(...)->orderBy(...)->paginate(5); //Search posts

    return Response::json(View::make('includes.posts', ['posts' => $posts])->render());
}

And jQuery appends the HTML on the #posts div:

$('#search').submit(function(e) {
    e.preventDefault();
    var form = $(this);

    $.post(form.attr('action'), form.serialize(), function(data) {
        $('#posts').html(data);
    });
});

This works perfect. But now when I click on a pagination link, the page reloads and my search results are gone (obvious). How do I paginate these posts? I've read this, this and this article, but I don't understand how to implement it.

Edit

This is my jQuery for the pagination so far:

$('#posts').on('click', '.pagination a', function(e) {
    e.preventDefault();
    var url = $(this).attr('href'),
        page = url.split('page=')[1],
        data = $('#search').serializeArray();

    data.push({page: page}); // Add page variable to post data
    console.log(data);

    $.post($('#search').attr('action'), data, function(data) {
        $('#posts').html(data['posts']);
    });
});

This is data is being send when I click on a pagination link (page 2):

Unfortunately nothing happens, the posts from page 1 keep showing.

解决方案

I'm not very familiar with pagination in Laravel but judging from the links you listed it doesn't look too hard. This code is untested though...

$('#pagination a').on('click', function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    $.post(url, $('#search').serialize(), function(data){
        $('#posts').html(data);
    });
});

Update

In case the pagination links are wrong (like the were for the OP) you have to build the url by yourself.
Just take the url you want and add ?page=#number to it.

// page being the page number stripped from the original link
var url = $('#search').attr('action')+'?page='+page;

这篇关于使用 Laravel 进行 AJAX 分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！