我的ajax分页链接到过滤器时遇到一些困难。这是它应该如何工作的。用户可以通过特定页面访问表单。单击提交按钮时,将在JS中发出原始sql请求,并实现POST ajax请求,以使用分页菜单在页面底部获取结果。这部分有效。但是我的分页菜单有一些问题,因为链接不起作用。例如,通过单击“第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');
}
});
}
我不明白为什么它不起作用,我想我误会了一些东西。
谢谢,祝你有美好的一天
答案 0 :(得分:0)
Route::get('articles/filter/{page}', 'ArticleController@filter');
public function filter(Request $request, int $page) {
$articles = Article::paginate($page);
}
全部
答案 1 :(得分:0)
Laravel按照约定使用来自请求或查询字符串的页面值。如果您选择不使用它,则可以自行设置。如果遵循约定,则需要将查询字符串page=#
附加到ajax请求中的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;
});