使用 laravel 和 jq 分页无法按预期工作
Paginate doesn't work as expected uisng laravel and jq
我正在处理过滤数据。由于存在 <input>
,如果有人开始输入,我将调用 jq
函数向我的控制器发送请求。它工作正常。甚至我也得到过滤数据。但是,如果我单击第 2 页,则会影响设计。所以在我知道它是改变我的 url
.
举个例子——
过滤数据后(效果很好)
code.test/?page=1
但是如果你点击第 2 页,它会重定向到
code.test/filter?page=2
这是我的 main.blade
-
代码
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Enter email" name="email">
</div>
</div>
<div class="col-md-3 col-sm-12">
<div class="form-group">
<select id="department">
<option value="0">All Departments</option>
@foreach($department as $d)
<option value="{{$d->id}}">{{$d->name}}</option>
@endforeach
</select>
</div>
</div>
</div>
<div id="filter">
<div class="row">
<?php
$count = count($data);//dd($data[0]->fname);
?>
@if($count > 0)
@foreach($data as $d)
<div class="col-md-12">
{{$d->fname}}, {{$d->lname}}<br>
{{$d->profile}}<br>
<b>{{$d->departments->name}}</b>
</div>
@endforeach
@else
No data found
@endif
</div>
</div>
{{ $data->appends($data)->links() }}
</div>
这是我的jq函数-
function filter(){
var str = $("#search").val();
var dep = $('#department option:selected').val();
// /alert(dep);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "GET",
url: '/filter',
data: {
str: str,
dep: dep,
},
success: function(data){
console.log(data);
$('#filter').html(data);
},
});
}
$(document).ready(function(){
$("#search").on('input', function(){
filter();
});
$("#department").change(function () {
filter();
});
});
现在 controller
我在过滤后返回一个 view
-
public function filter(Request $request){
$str = $request->str;
$dep = $request->dep;//dd($dep);
$s = new Staff;
$d = new Department;
//If input and dropdown values are available
if($str != null && $dep != 0){
$data = $s::with('departments')
->where('department', $dep)
->where(function($q) use ($str) {
$q->where('fname', 'like', '%'.$str.'%')
->orWhere('lname', 'like', '%'.$str.'%');
})
->paginate(10)
->appends(['dep'=> $dep, 'str'=> $str]);
$data_count = count($data);
return view('search', compact('data', 'data_count'));
} else if($str != null && $dep == 0){ //If input value is set and dropdown value set to all departments
$data = $s::with('departments')
->where(function($q) use ($str) {
$q->where('fname', 'like', '%'.$str.'%')
->orWhere('lname', 'like', '%'.$str.'%');
})
->paginate(10)
->appends(['dep'=> $dep, 'str'=> $str]);
$data_count = count($data);
return view('search', compact('data', 'data_count'));
} else if($str == null && $dep != 0){ //If dropdown value is not null and input is null
$data = $s::with('departments')
->where('department', $dep)
->paginate(10)
->appends(['dep'=> $dep, 'str'=> $str]);
$data_count = count($data);
return view('search', compact('data', 'data_count'));
} else if($str == null && $dep == 0){ //If dropdown value is null and input is null
$data = $s::with('departments')->paginate(10)->appends(['dep'=> $dep, 'str'=> $str]);
$data_count = count($data);
return view('filter', compact('data', 'data_count'));
}
}
请帮我解决这个问题。
提前致谢。
回答有点晚了,但这可能对你有帮助 -
- 在您的
main.blade
中,您可以将该数据传递给其他 view
而不是直接加载数据,然后 @include
将新的 blade
文件传递给 main.blade
.像这样-
<div class="ui-block">
<div class="ui-block-content">
<div class="row">
<div class="col col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Start typing keywords.." name="search">
</div>
</div>
<div class="col col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
<div class="form-group">
<select id="department" class="form-control">
<option value="0">All Departments</option>
@foreach($department as $d)
<option value="{{$d->id}}">{{$d->name}}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
</div>
<div id="filter">
@include('search')
</div>
创建新的 blade 作为示例 search.blade
并将 <div id="filter"> /* ---- This lines ---*/
中的任何内容粘贴到 search.blade
.
在你的js
函数中改变main.blade
-
url
$.ajax({
type: "GET",
url: '/',//change this to main.blade's url
data: {
str: str,
dep: dep,
},
success: function(data){
console.log(data);
$('#filter').html(data);
},
});
- 在
controller
中进行更改。只需检查请求是否来自 ajax
然后处理该数据。
public function main(Request $request)
{
$data = Staff::with('departments')->orderBy('created_at', 'DESC')->paginate(10);
$department = Department::all();
//If request is from ajax, then processing to filter data
if($request->ajax()) {
$str = $request->str;
$dep = $request->dep;//dd($dep);
$s = new Staff;
$d = new Department;
if($str != null && $dep != 0){ //If input and dropdown values are available
$data = $s::with('departments')
->where('department', $dep)
->where(function($q) use ($str) {
$q->where('fname', 'like', '%'.$str.'%')
->orWhere('lname', 'like', '%'.$str.'%')
->orWhere('profile', 'like', '%'.$str.'%');
})
->orderBy('created_at', 'DESC')
->paginate(10);
} else if($str != null && $dep == 0){ //If input value is set and dropdown value set to all departments
$data = $s::with('departments')
->where(function($q) use ($str) {
$q->where('fname', 'like', '%'.$str.'%')
->orWhere('lname', 'like', '%'.$str.'%')
->orWhere('profile', 'like', '%'.$str.'%');
})
->orderBy('created_at', 'DESC')
->paginate(10);
$data_count = count($data);
return view('search', compact('data', 'data_count'));
} else if($str == null && $dep != 0){ //If dropdown value is not null and input is null
$data = $s::with('departments')
->where('department', $dep)
->orderBy('created_at', 'DESC')
->paginate(10);
} else if($str == null && $dep == 0){ //If dropdown value is null and input is null
$data = $s::with('departments')->orderBy('created_at', 'DESC')->paginate(10);
}
// returning data to view
return view('search', ['data' => $data])->render();
}
//returning data if request is not from ajax
return view('main', compact('data', 'department'));
}
希望这对您有用。谢谢。
我正在处理过滤数据。由于存在 <input>
,如果有人开始输入,我将调用 jq
函数向我的控制器发送请求。它工作正常。甚至我也得到过滤数据。但是,如果我单击第 2 页,则会影响设计。所以在我知道它是改变我的 url
.
举个例子—— 过滤数据后(效果很好)
code.test/?page=1
但是如果你点击第 2 页,它会重定向到
code.test/filter?page=2
这是我的 main.blade
-
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Enter email" name="email">
</div>
</div>
<div class="col-md-3 col-sm-12">
<div class="form-group">
<select id="department">
<option value="0">All Departments</option>
@foreach($department as $d)
<option value="{{$d->id}}">{{$d->name}}</option>
@endforeach
</select>
</div>
</div>
</div>
<div id="filter">
<div class="row">
<?php
$count = count($data);//dd($data[0]->fname);
?>
@if($count > 0)
@foreach($data as $d)
<div class="col-md-12">
{{$d->fname}}, {{$d->lname}}<br>
{{$d->profile}}<br>
<b>{{$d->departments->name}}</b>
</div>
@endforeach
@else
No data found
@endif
</div>
</div>
{{ $data->appends($data)->links() }}
</div>
这是我的jq函数-
function filter(){
var str = $("#search").val();
var dep = $('#department option:selected').val();
// /alert(dep);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "GET",
url: '/filter',
data: {
str: str,
dep: dep,
},
success: function(data){
console.log(data);
$('#filter').html(data);
},
});
}
$(document).ready(function(){
$("#search").on('input', function(){
filter();
});
$("#department").change(function () {
filter();
});
});
现在 controller
我在过滤后返回一个 view
-
public function filter(Request $request){
$str = $request->str;
$dep = $request->dep;//dd($dep);
$s = new Staff;
$d = new Department;
//If input and dropdown values are available
if($str != null && $dep != 0){
$data = $s::with('departments')
->where('department', $dep)
->where(function($q) use ($str) {
$q->where('fname', 'like', '%'.$str.'%')
->orWhere('lname', 'like', '%'.$str.'%');
})
->paginate(10)
->appends(['dep'=> $dep, 'str'=> $str]);
$data_count = count($data);
return view('search', compact('data', 'data_count'));
} else if($str != null && $dep == 0){ //If input value is set and dropdown value set to all departments
$data = $s::with('departments')
->where(function($q) use ($str) {
$q->where('fname', 'like', '%'.$str.'%')
->orWhere('lname', 'like', '%'.$str.'%');
})
->paginate(10)
->appends(['dep'=> $dep, 'str'=> $str]);
$data_count = count($data);
return view('search', compact('data', 'data_count'));
} else if($str == null && $dep != 0){ //If dropdown value is not null and input is null
$data = $s::with('departments')
->where('department', $dep)
->paginate(10)
->appends(['dep'=> $dep, 'str'=> $str]);
$data_count = count($data);
return view('search', compact('data', 'data_count'));
} else if($str == null && $dep == 0){ //If dropdown value is null and input is null
$data = $s::with('departments')->paginate(10)->appends(['dep'=> $dep, 'str'=> $str]);
$data_count = count($data);
return view('filter', compact('data', 'data_count'));
}
}
请帮我解决这个问题。
提前致谢。
回答有点晚了,但这可能对你有帮助 -
- 在您的
main.blade
中,您可以将该数据传递给其他view
而不是直接加载数据,然后@include
将新的blade
文件传递给main.blade
.像这样-
<div class="ui-block">
<div class="ui-block-content">
<div class="row">
<div class="col col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Start typing keywords.." name="search">
</div>
</div>
<div class="col col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
<div class="form-group">
<select id="department" class="form-control">
<option value="0">All Departments</option>
@foreach($department as $d)
<option value="{{$d->id}}">{{$d->name}}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
</div>
<div id="filter">
@include('search')
</div>
创建新的 blade 作为示例
search.blade
并将<div id="filter"> /* ---- This lines ---*/
中的任何内容粘贴到search.blade
.在你的
js
函数中改变main.blade
- url
$.ajax({
type: "GET",
url: '/',//change this to main.blade's url
data: {
str: str,
dep: dep,
},
success: function(data){
console.log(data);
$('#filter').html(data);
},
});
- 在
controller
中进行更改。只需检查请求是否来自ajax
然后处理该数据。
public function main(Request $request)
{
$data = Staff::with('departments')->orderBy('created_at', 'DESC')->paginate(10);
$department = Department::all();
//If request is from ajax, then processing to filter data
if($request->ajax()) {
$str = $request->str;
$dep = $request->dep;//dd($dep);
$s = new Staff;
$d = new Department;
if($str != null && $dep != 0){ //If input and dropdown values are available
$data = $s::with('departments')
->where('department', $dep)
->where(function($q) use ($str) {
$q->where('fname', 'like', '%'.$str.'%')
->orWhere('lname', 'like', '%'.$str.'%')
->orWhere('profile', 'like', '%'.$str.'%');
})
->orderBy('created_at', 'DESC')
->paginate(10);
} else if($str != null && $dep == 0){ //If input value is set and dropdown value set to all departments
$data = $s::with('departments')
->where(function($q) use ($str) {
$q->where('fname', 'like', '%'.$str.'%')
->orWhere('lname', 'like', '%'.$str.'%')
->orWhere('profile', 'like', '%'.$str.'%');
})
->orderBy('created_at', 'DESC')
->paginate(10);
$data_count = count($data);
return view('search', compact('data', 'data_count'));
} else if($str == null && $dep != 0){ //If dropdown value is not null and input is null
$data = $s::with('departments')
->where('department', $dep)
->orderBy('created_at', 'DESC')
->paginate(10);
} else if($str == null && $dep == 0){ //If dropdown value is null and input is null
$data = $s::with('departments')->orderBy('created_at', 'DESC')->paginate(10);
}
// returning data to view
return view('search', ['data' => $data])->render();
}
//returning data if request is not from ajax
return view('main', compact('data', 'department'));
}
希望这对您有用。谢谢。