带分页的 Ajax 搜索 [Laravel]

Posted 2023-03-14

【中文标题】带分页的 Ajax 搜索 [Laravel]

【英文标题】：Ajax Search with pagination [Laravel]

【发布时间】：2015-03-14 05:00:51

【问题描述】：

我已经阅读了https://gist.github.com/tobysteward/6163902 和AJAX pagination with Laravel，但我似乎有一个不同的问题，所以无论如何。

长话短说：当我搜索时，会获取正确的数据，并且 ajax 仅对第一页起作用“显示数据，不刷新”，但从页面的下一页刷新，所以如何进行 ajax 调用循环遍历返回的数据，并根据每一页显示？

还有如何将搜索查询添加到 URL，当前获取数据时，URL 不会更新，而是保持其当前状态（即index?page=3）。

搜索表单

 Form::open(['route' => 'search', 'method' => 'GET', 'id' => 's-form',])
     Form::text('search', null, ['id' => 'search', 'placeholder' => 'Search For ...']) 
     Form::submit(Go) 
 Form::close() 

搜索控制器

public function search() 

    $input = Input::get('search');
    $posts = Post::where('title','LIKE',$input)->paginate(4);

    if (Request::ajax()) 
        return View::make('posts.search')->withPosts($posts);
    
    return View::make('posts.index')->withPosts($posts);

搜索视图

@forelse ($posts as $post)
        // do stuff
@endforeach
<nav> $posts->appends(Request::except('page'))->links() </nav>

js

$('#s-form').submit(function(e)

    e.preventDefault();
    $.ajax(
        url: $(this).attr('action'),
        data:
            search: $('#search').val()
        ,
        success: function(data)
            $('#result').html(data);
        
    );
);

【问题讨论】：

你没有在 javascript 中的任何地方传递页面参数，这应该如何工作？分页需要正确的参数，而且您没有任何点击处理程序来通过 javascript 处理分页

是的，我知道，但具体怎么做呢？这就是我真正要求的。

尝试在 ajax 请求的数据部分中添加一个页面参数，只需硬编码一个数字，例如 data : search : $('#search').val(), page : ' 2'

好吧，它成功了，现在呢？

您必须使用点击处理程序从页面动态获取该参数。我无法判断，因为我在这里看不到输出 html。将处理程序附加到分页按钮，如果我单击它获取数字并将其添加到数据中。这应该可以解决它。

【参考方案1】：

这就是它所需要的：

$(document).ajaxComplete(function() 
    $('.pagination li a').click(function(e) 
        e.preventDefault();
        var url = $(this).attr('href');
        $.ajax(
            url: url,
            success: function(data) 
                $('#result').html(data);
            
        );
    );
);

现在我只需要根据每个页面更新 URL。

【讨论】：

您可以使用 JavaScript 历史 API。请以***.com/questions/824349/… 为例。由于您不重新加载页面，因此您必须使用 Javascript

感谢您的建议，会尝试一下。