使用 ajax 将 laravel 分页与实时搜索相结合

Question

我有一个项目列表显示在一个表格中，该表格使用 laravel 的分页在底部有一个分页。

$projects = projects::where('active', '=', 1)->orderBy('id', 'desc')->paginate(15);
return view('index', compact('projects'));

我还使用 ajax 进行实时搜索以按名称过滤项目。

public function search(Request $request){
        if($request->ajax()){
            $query = $request->get('query');
            if($query != ''){
                $data = DB::table('projects')
                 ->where('active', '=', 1)
                 ->whereNull('deleted_at')
                 ->where('name', 'like', '%'.$query.'%')
                 ->get();

            }else{
                $data = DB::table('projects')->where('active', '=', 1)->whereNull('deleted_at')->orderBy('id', 'desc')->get();
            }

        }
        return response($data->jsonSerialize(), Response::HTTP_OK);
    }

Js：

searchProjects = function(query){
        $.ajax({
            url: "/projects/search",
            type: "POST",
            data: {
                query: query,
            },
            success: function (response){
                displayData(response);
            }
        })
    },

所以首先我通过服务器端加载项目，然后如果我进行搜索，数据会被通过 ajax 的结果替换。

我面临的问题是，每当我进行搜索时，分页都不会更新。 假设搜索显示 5 个结果，如果结果少于 15 个（例如），我希望分页从 1-2 变为 1-1，甚至消失（如果有意义的话）。

有谁知道如何将实时搜索和分页结合起来在 laravel 上协同工作？

Answer 1

我相信你的问题是你想将 PHP 生成的 HTML 和 JS 生成的 HTML 结合起来。

分页部分将生成特定的 HTML，如果您想在不完全重新加载页面（通过 Ajax 调用）的情况下更新数据，则需要重新生成 HTML。 您可以通过创建构建 HTML 的 JS 来做到这一点。但是，这意味着您有 2 个地方来维护您的 HTML。

我建议将您的代码更新为（而不是 JSON 数据）返回新生成的 HTML 部分，并将此新 HTML 注入您的页面。

还要确保更新您的搜索功能以充分利用您的模型，而不是使用DB::table。

希望这个回复有点清楚。

Answer 2

假设您有一个jobs/index.blade.php 文件。这将作为您工作的基础文件。它将列出所有可用的工作：

<div class="container">
        <div class="row">
            <div class="col-sm-9">

                @if (count($jobs) > 0)
                    <section class="jobs">
                        @include('jobs.load')
                    </section>
                @endif

            </div>

            <div class="col-sm-3">
            </div>
        </div>
    </div>

<script>
    $(function() {
        $('body').on('click', '.pagination a', function(e) {
            e.preventDefault();

            $('#load a').css('color', '#dfecf6');
            $('#load').append('<img style="position: absolute; left: 0; top: 0; z-index: 100000;" src="/images/loading.gif" />');

            var url = $(this).attr('href');
            getJobs(url);
            window.history.pushState("", "", url);
        });

        function getJobs(url) {
            $.ajax({
                url : url,
                success: function(data) {
                    $('.jobs').html(data);
                },
                error: function(err) {
                    alert("jobs cannot be loaded");
                    console.log(err);
                }
            });
        }
    });
</script>

这将是文件组件，jobs/load.blade.php，将在 ajax 上请求：

<div id="load" style="position: relative;">
@foreach($articles as $article)
    <div>
        <h3>
            <a href="{{ action('ArticleController@show', [$article->id]) }}">{{$article->title }}</a>
        </h3>
    </div>
@endforeach
</div>
{{ $articles->links() }}

现在要打开页面，您需要一个控制器功能，它是自记录的：

   public function index(Request $request)
    {
        // get jobs and limit to 5 data
        $jobs = Jobs::paginate(5);

        // this condition will be executed on the ajax request
        // that is everytime you click on prev/ next
        // it will be handled by jquery's .html() function
        if ($request->ajax()) {
            return view('jobs.load', ['jobs' => $jobs])->render();  
        }

        // on traditional HTTP request, it will load the base page
        return view('jobs.index', compact('jobs'));
    } 

参考：

https://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel