Laravel Ajax分页：没有请求

Question

I have some difficulties with my ajax pagination linked to a filter. Here's how it should work. The user can access via a specific page to a form. When clicking the submit button, a raw sql request is made in JS and a POST ajax request is achieved to get the results at the bottom of the page with a pagination menu. This part works. But I have some issues with the pagination menu because the links don't work. For example, by clicking the "page 2" link, nothing happens.

Here are the different parts of my code:

Routes

Route::get('articles/filter', 'ArticleController@filterx');
Route::post('articles/request/ajax/articles/filter', 'ArticleController@filtery');
Route::get('articles/request/ajax/articles/filter', 'ArticleController@filtery');

Controller

ArticleController

public function filterx() {   // get filter page
    return view('filter');
}

public function filtery(Request $request) {   // filter ajax function
    $articles = Article::paginate(2);
    if($request->ajax()) {
        // partial view returned in html
        return $html = view('filterResults', compact('articles'));
    }
}

Views

filter.blade.php

@extends('layouts/app')

@section('title')
    Title
@endsection

@section('content')
<div class="container">
    <!-- filter -->
    <h2>Filter</h2>
    <div class="content-card content">
        <form method="POST" action="">
            <!-- form code... -->
        </form>
    </div>
    <div id="filter-results">
    </div>
</div>
@endsection

filterResults.blade.php

@foreach($articles as $article)
    <p>{{ $article->name }}</p>
@endforeach

{{ $articles->links() }}

Javascript

$("#submit-button").click(function(e) {
    e.preventDefault();
    // ajax request (raw mysql request)
    var requestQuery = ...;    // (quite long) raw request
    console.log(requestQuery);    // console verification of request
    $.ajax({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        url: '../articles/request/ajax/articles/filter',
        type: 'POST',
        data: {
            request: requestQuery
        },
        success: function(html) {
            $("#filter-results").empty().html(html);
        }
    });
});

$(window).on('hashchange', function() {
    // if hash in url
    if (window.location.hash) {
        // page contains hash value
        var page = window.location.hash.replace('#', '');
        if (page == Number.NaN || page <= 0) {
            return false;
        }
        // if ok ->getData returned
        else {
            getData(page);
        }
    }
});

$(document).on('click', '.pagination a', function(e) {
    e.preventDefault();
    $('.pagination li').removeClass('active');
    $(this).parent('li').addClass('active');
    var url = $(this).attr('href');
    var page = $(this).attr('href').split('page=')[1];
    getData(page,url);
});

function getData(page,url) {
    $.ajax(
    {
        url: url,
        type: 'get',
        datatype: 'html',
        done: function(data) {
            console.log('ok');
            $('#filter-results').empty().html(data);
            location.hash = page;
        },
        fail: function(jqXHR, ajaxOptions, thrownError) {
            console.log('No response from server');
        }
    });
}

I don't understand why it is not working, I thing I misunderstood something.

Thanks and have a good day

Answer 1

Laravel uses the page value from the request, or query string, by convention. If you choose not to use that, you can set your own. If following convention, you'd need to append the query string page=# to your url in the ajax request.

The fourth argument of the Builder::paginate is the page number:

public function paginate($perPage = null, $columns = ['*'], $pageName = 'page', $page = null)
{
    $page = $page ?: Paginator::resolveCurrentPage($pageName);

    $perPage = $perPage ?: $this->model->getPerPage();

    $results = ($total = $this->toBase()->getCountForPagination())
                                ? $this->forPage($page, $perPage)->get($columns)
                                : $this->model->newCollection();

    return $this->paginator($results, $total, $perPage, $page, [
        'path' => Paginator::resolveCurrentPath(),
        'pageName' => $pageName,
    ]);
}

You could also define your own page resolver. The default is set in PaginationServiceProvider:

    Paginator::currentPageResolver(function ($pageName = 'page') {
        $page = $this->app['request']->input($pageName);

        if (filter_var($page, FILTER_VALIDATE_INT) !== false && (int) $page >= 1) {
            return (int) $page;
        }

        return 1;
    });