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>

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

<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

将Laravel分页与使用Ajax进行的实时搜索相结合

2 个答案: