Сочетание пагинации в Laravel с поиском в реальном времени с помощью ajax - PullRequest
Новая
       11

Сочетание пагинации в Laravel с поиском в реальном времени с помощью ajax

0 голосов
/ 28 января 2019

У меня есть список проектов, отображаемых в таблице с нумерацией страниц внизу с использованием разбивки на страницы 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 результатов, я хочу, чтобы нумерация страниц изменялась с 1-2 на 1-1, или даже просто исчезала (если это имеет смысл), если результатов меньше 15 (например).

Кто-нибудь знает, как я бы совмещал поиск в реальном времени и пагинацию, которые работают вместе на laravel?

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Допустим, у вас есть файл 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

0 голосов
/ 29 января 2019

Я считаю, что ваша проблема в том, что вы хотите объединить как сгенерированный PHP HTML, так и сгенерированный JS HTML.

Часть с разбивкой по страницам сгенерирует определенный HTML, если вы захотите обновить свои данные без полной перезагрузки страницы(через вызов Ajax) вам нужно восстановить HTML.Вы можете сделать это, создав JS, который создает ваш HTML.Однако это означает, что у вас есть 2 места для поддержки вашего HTML.

Я бы предложил обновить ваш код, чтобы (вместо данных JSON) возвращать вновь сгенерированную HTML-часть и вставлять этот новый HTML-код на вашу страницу.

Также обязательно обновите функцию поиска, чтобы в полной мере использовать вашу модель вместо использования DB::table.

Надеюсь, этот ответ немного ясен.

...