Laravel Ajax 分页：无请求

Question

我的 ajax 分页链接到过滤器时遇到了一些困难。这是它应该如何工作的。用户可以通过特定页面访问表单。单击提交按钮时，在JS中发出原始sql请求并实现POST ajax请求以在页面底部使用分页菜单获取结果。这部分有效。但是我对分页菜单有一些问题，因为链接不起作用。例如，点击“page 2”链接，什么也没有发生。

以下是我的代码的不同部分：

路线

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

控制器

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'));
    }
}

观看次数

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');
        }
    });
}

我不明白为什么它不起作用，我觉得我误解了一些东西。

谢谢，祝你有美好的一天

Answer 1

按照惯例，Laravel 使用请求中的页面值或查询字符串。如果您选择不使用它，您可以设置自己的。如果遵循约定，您需要在 ajax 请求中将查询字符串 page=# 附加到您的 url。

Builder::paginate的第四个参数是页码：

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,
    ]);
}

您还可以定义自己的页面解析器。默认在 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;
    });

Answer 2

Route::get('articles/filter/{page}', 'ArticleController@filter');

public function filter(Request $request, int $page) {
 $articles = Article::paginate($page);
}

就是这样