Laravel AJAX 分页从旧数据中提取行
Laravel AJAX Pagination brings up rows from old data
我有一个 table 单击按钮后我想从 Z-A 字母顺序订购哪些内容。
这很好用。一开始我遇到了问题，我返回的分页链接不正确。修复了这些，这样我就不会再收到 404 页面了。但是现在当我点击下一页按钮时。 table 将转到旧无序数据的下一页。
我的排序函数：
function Sorting($column, $direction)
{
$data = $this->db->GetAll("mid"/* table */, "40" /* rows for pagination*/, true/*paginate*/, true,/*sorting*/ "$column" /* column to be sorted on*/, "$direction" /* ASC or DESc */);
$Fields = $this->db->GetFieldnames("mid", false); // Field names for the table.
$data->setPath("http://localhost:8000/dashboard/beheer/marketing"); // setting the correct path for the pagination otherwise an 404 error would be thrown.
$returnview = view("Beheer.Dashboard.components.Marketing.tableLeads")->with('Leads', $data)->with('MidTableFields', $Fields)->render(); // returning it to the view.
echo json_encode($returnview); // returning it to the Ajax call.
}
我的看法：
<?php
/**
* Created by PhpStorm.
* User: Entric
* Date: 14-6-2018
* Time: 15:43
*/
?>
<div>
<table class="table" id="tablemid">
<thead>
<tr>
@foreach($MidTableFields as $field)
@if($field === 'id')
@php
$field = 'MID';
@endphp
@endif
<th id="{{$field}}"><a onclick="Sort(this.id)" href="#
{{$field}}" id="{{$field}}">{{$field}}</a></th>
@endforeach
</tr>
</thead>
<tbody id="LeadsContentTable" style=>
@foreach($Leads->reverse() as $lead)
@if($lead->Actief == 1)
@php
$active = 'Ja';
@endphp
@else
@php
$active = 'Nee';
@endphp
@endif
<tr class="tableRow" id="row{{$lead->id}}">
<td id="mid">
{{$lead->id}}
</td>
<td id="company">
{{$lead->Bedrijfsnaam}}
</td>
<td id="contact">
{{$lead->Contactpersoon}}
</td>
<td id="email">
{{$lead->Email}}
</td>
<td id="tel">
{{$lead->Telefoon}}
</td>
<td id="ip">
{{$lead->IP}}
</td>
<td id="active">
{{$active}}
</td>
<td id="note">
{{$lead->Notitie}}
</td>
<td>
<a href="#" id="{{$lead->id}}" onclick="EditLead(this.id);" data-toggle="modal"
data-target="#LeadModalEdit">
<button class="btn btn-neutral btn-icon btn-round button">
<i class="material-icons" style="color:rgba(223,176,0,0.79)">mode_edit</i>
</button>
</a>
</td>
<td>
<a href="#" id="{{$lead->id}}" onclick="GetDeleteLead(this.id);" data-toggle="modal"
data-target="#LeadModalDelete">
<button class="btn btn-neutral btn-icon btn-round button">
<i class="material-icons" style="color:rgba(185,14,22,0.81)">clear</i>
</button>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="pagination">
{{ $Leads->links("pagination::bootstrap-4")}}
</div>
启动排序的JS函数：
function Sort(identifier){
let sorter = 'asc';
if(sorter === 'asc'){
sorter = 'desc';
} else if(sorter === 'desc'){
sorter = 'asc';
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '/SortLeads',
type: 'GET',
dataType: "json",
beforeSend: function (xhr) {
const token = jQuery('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
},
data: {id: identifier, sorter: sorter},
success: function (data) {
$("#tablecont").empty();
$("#tablecont").append(data);
}
});
}
更新
这就是我的控制器功能现在的样子。
function Sorting($column, $direction)
{
$data = $this->db->GetAll("mid"/* table */, "40" /* rows for pagination*/, true/*paginate*/, true,/*sorting*/"$column" /* column to be sorted on*/, "$direction" /* ASC or DESc */);
$Fields = $this->db->GetFieldnames("mid", false); // Field names for the table.
$paginator = $data->appends(['sort' => $direction ])->setPath("http://localhost:8000/dashboard/beheer/marketing")->links();
$returnview = view("Beheer.Dashboard.components.Marketing.tableLeads")->with('Leads', $data)->with('MidTableFields', $Fields)->with('pager', $paginator)->render(); // returning it to the view.
echo json_encode($returnview); // returning it to the Ajax call.
}
在我看来，我的分页器看起来像：
@if(!isset($pager))
{{ $Leads->links("pagination::bootstrap-4")}}
@elseif(isset($pager))
{{$pager}}
@endif
这会加载到新的分页器中，我知道它是另一个分页器，因为它没有使用 Bootstrap 4.
分页器加载控制器中设置的选项。但是还是没有显示数据..
因为{{ $Leads->links("pagination::bootstrap-4")}}根据旧参数创建链接
起初 $direction 参数是 'asc' 所以 Laravel 根据这些参数创建链接。您应该添加到可变方向参数。
像这样的东西。 {{ $Leads->appends(['sort' => 'desc'])->links() }}
ajax request后不知道怎么办。也许你只是在 sort button clicked
时用新的 parameters 刷新页面
你应该这样做
success: function (data) {
var rows = data.rows
var paginator_links = data.links // you will produce this in backend
$("#tablecont").empty();
// $("#tablecont").append(data);
$("#tablecont").append(rows);
// here you will replace links
$('.pagination').empty();
$('.pagination').append(links);
}
我将排序请求的请求类型更改为 GET。我把paginator的url改成了：domain.nl/dashboard/beheer/marketing/sortleads。
let sorter = 'desc';
function Sort(identifier){
if(sorter === 'desc'){
sorter = 'asc';
} else if(sorter === 'desc'){
sorter = 'asc';
}
if(identifier == "MID"){
identifier = "id";
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '/dashboard/beheer/SortLeads',
type: 'GET',
dataType: "json",
beforeSend: function (xhr) {
const token = jQuery('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
},
data: {id: identifier, sorter: sorter},
success: function (data) {
$("#tablecont").empty();
$("#tablecont").append(data);
}
});
}
我检查了 ajax 请求在 Ajax 控制器中触发的函数中发送了哪些参数。
我的Ajax控制器中的排序功能。
public function LeadSort(){
if(isset($_GET['id'])){
$this->marketingController->Sorting($_GET['id'], $_GET['sorter']);
} else {
$paginator = \Session::get('pager');
$arrayoptions = \Session::get('data');
$data = $this->db->GetAll("mid", "50" , true, true, $arrayoptions['col'], $arrayoptions['dir'] );
$Fields = \Session::get('fields');
return view("Beheer.marketing")->with('Leads', $data)->with('MidTableFields', $Fields)->with('pager', $paginator)->render();
}
}
这里我检查是否正在发送 ID。如果是这样的话。这意味着这是第一次对某些东西进行排序。 ID 指的是列 header 名称。因此，如果单击公司名称，它将按公司名称排序。
我查看$_GET['id']设置了哪些列，查看$_GET['sorter']需要排序的方向。我将这 2 个值放入 2 session 变量中，供以后在 MarketingController 的 Sorter 函数中使用。然后我生成排序后的数据并将其放入 html table 中，在此函数中我还加载了正在排序的 table 的 table 字段名称和 load/render 分页器并将其放入 session 变量中。
最终我使用数据并将其呈现在视图中。 Ajax Success 函数将返回并附加它。
这里是MarketingController.php
的Sorter函数
function Sorting($column, $direction)
{
$data = $this->db->GetAll("mid", "50", true, true,"$column", "$direction");
$Fields = $this->db->GetFieldnames("mid", false);
$paginator = $data->appends(['sort' => $direction ])->render("pagination::bootstrap-4");
\Session::put('pager', $paginator);
\Session::put('data', ["col" => $column, "dir" => $direction]);
\Session::put('fields', $Fields);
$returnview = view("Beheer.Dashboard.components.Marketing.tableLeads")->with('Leads', $data)->with('MidTableFields', $Fields)->with('pager', $paginator)->render(); // returning it to the view.
echo json_encode($returnview); // returning it to the Ajax call.
}
但是如果我们想通过 table 分页怎么办？单击分页按钮时，不会发送任何 ID。所以它会尝试获取我在 session 变量中输入的所有值。我重复使用它们来获取我的数据并呈现一个新视图。这将产生分页器点击的第二页或任何页面。 Ajax 成功函数
也将追加
此解决方案的缺点：
我还没有弄清楚为什么以及如何解决此解决方案产生的问题。但现在的问题是：如果你按例如分页器的第三个按钮。将加载正确的数据。但是分页器不会更新以使第 3 个按钮处于活动状态。
Begmuhammet Kakabayev 的巨大支持。帮助我走出困境，让我走上通往完整解决方案的正确道路！
我有一个 table 单击按钮后我想从 Z-A 字母顺序订购哪些内容。
这很好用。一开始我遇到了问题，我返回的分页链接不正确。修复了这些，这样我就不会再收到 404 页面了。但是现在当我点击下一页按钮时。 table 将转到旧无序数据的下一页。
我的排序函数：
function Sorting($column, $direction)
{
$data = $this->db->GetAll("mid"/* table */, "40" /* rows for pagination*/, true/*paginate*/, true,/*sorting*/ "$column" /* column to be sorted on*/, "$direction" /* ASC or DESc */);
$Fields = $this->db->GetFieldnames("mid", false); // Field names for the table.
$data->setPath("http://localhost:8000/dashboard/beheer/marketing"); // setting the correct path for the pagination otherwise an 404 error would be thrown.
$returnview = view("Beheer.Dashboard.components.Marketing.tableLeads")->with('Leads', $data)->with('MidTableFields', $Fields)->render(); // returning it to the view.
echo json_encode($returnview); // returning it to the Ajax call.
}
我的看法：
<?php
/**
* Created by PhpStorm.
* User: Entric
* Date: 14-6-2018
* Time: 15:43
*/
?>
<div>
<table class="table" id="tablemid">
<thead>
<tr>
@foreach($MidTableFields as $field)
@if($field === 'id')
@php
$field = 'MID';
@endphp
@endif
<th id="{{$field}}"><a onclick="Sort(this.id)" href="#
{{$field}}" id="{{$field}}">{{$field}}</a></th>
@endforeach
</tr>
</thead>
<tbody id="LeadsContentTable" style=>
@foreach($Leads->reverse() as $lead)
@if($lead->Actief == 1)
@php
$active = 'Ja';
@endphp
@else
@php
$active = 'Nee';
@endphp
@endif
<tr class="tableRow" id="row{{$lead->id}}">
<td id="mid">
{{$lead->id}}
</td>
<td id="company">
{{$lead->Bedrijfsnaam}}
</td>
<td id="contact">
{{$lead->Contactpersoon}}
</td>
<td id="email">
{{$lead->Email}}
</td>
<td id="tel">
{{$lead->Telefoon}}
</td>
<td id="ip">
{{$lead->IP}}
</td>
<td id="active">
{{$active}}
</td>
<td id="note">
{{$lead->Notitie}}
</td>
<td>
<a href="#" id="{{$lead->id}}" onclick="EditLead(this.id);" data-toggle="modal"
data-target="#LeadModalEdit">
<button class="btn btn-neutral btn-icon btn-round button">
<i class="material-icons" style="color:rgba(223,176,0,0.79)">mode_edit</i>
</button>
</a>
</td>
<td>
<a href="#" id="{{$lead->id}}" onclick="GetDeleteLead(this.id);" data-toggle="modal"
data-target="#LeadModalDelete">
<button class="btn btn-neutral btn-icon btn-round button">
<i class="material-icons" style="color:rgba(185,14,22,0.81)">clear</i>
</button>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="pagination">
{{ $Leads->links("pagination::bootstrap-4")}}
</div>
启动排序的JS函数：
function Sort(identifier){
let sorter = 'asc';
if(sorter === 'asc'){
sorter = 'desc';
} else if(sorter === 'desc'){
sorter = 'asc';
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '/SortLeads',
type: 'GET',
dataType: "json",
beforeSend: function (xhr) {
const token = jQuery('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
},
data: {id: identifier, sorter: sorter},
success: function (data) {
$("#tablecont").empty();
$("#tablecont").append(data);
}
});
}
更新
这就是我的控制器功能现在的样子。
function Sorting($column, $direction)
{
$data = $this->db->GetAll("mid"/* table */, "40" /* rows for pagination*/, true/*paginate*/, true,/*sorting*/"$column" /* column to be sorted on*/, "$direction" /* ASC or DESc */);
$Fields = $this->db->GetFieldnames("mid", false); // Field names for the table.
$paginator = $data->appends(['sort' => $direction ])->setPath("http://localhost:8000/dashboard/beheer/marketing")->links();
$returnview = view("Beheer.Dashboard.components.Marketing.tableLeads")->with('Leads', $data)->with('MidTableFields', $Fields)->with('pager', $paginator)->render(); // returning it to the view.
echo json_encode($returnview); // returning it to the Ajax call.
}
在我看来，我的分页器看起来像：
@if(!isset($pager))
{{ $Leads->links("pagination::bootstrap-4")}}
@elseif(isset($pager))
{{$pager}}
@endif
这会加载到新的分页器中，我知道它是另一个分页器，因为它没有使用 Bootstrap 4.
分页器加载控制器中设置的选项。但是还是没有显示数据..
因为{{ $Leads->links("pagination::bootstrap-4")}}根据旧参数创建链接
起初 $direction 参数是 'asc' 所以 Laravel 根据这些参数创建链接。您应该添加到可变方向参数。
像这样的东西。 {{ $Leads->appends(['sort' => 'desc'])->links() }}
ajax request后不知道怎么办。也许你只是在 sort button clicked
parameters 刷新页面
你应该这样做
success: function (data) {
var rows = data.rows
var paginator_links = data.links // you will produce this in backend
$("#tablecont").empty();
// $("#tablecont").append(data);
$("#tablecont").append(rows);
// here you will replace links
$('.pagination').empty();
$('.pagination').append(links);
}
我将排序请求的请求类型更改为 GET。我把paginator的url改成了：domain.nl/dashboard/beheer/marketing/sortleads。
let sorter = 'desc';
function Sort(identifier){
if(sorter === 'desc'){
sorter = 'asc';
} else if(sorter === 'desc'){
sorter = 'asc';
}
if(identifier == "MID"){
identifier = "id";
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '/dashboard/beheer/SortLeads',
type: 'GET',
dataType: "json",
beforeSend: function (xhr) {
const token = jQuery('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
},
data: {id: identifier, sorter: sorter},
success: function (data) {
$("#tablecont").empty();
$("#tablecont").append(data);
}
});
}
我检查了 ajax 请求在 Ajax 控制器中触发的函数中发送了哪些参数。
我的Ajax控制器中的排序功能。
public function LeadSort(){
if(isset($_GET['id'])){
$this->marketingController->Sorting($_GET['id'], $_GET['sorter']);
} else {
$paginator = \Session::get('pager');
$arrayoptions = \Session::get('data');
$data = $this->db->GetAll("mid", "50" , true, true, $arrayoptions['col'], $arrayoptions['dir'] );
$Fields = \Session::get('fields');
return view("Beheer.marketing")->with('Leads', $data)->with('MidTableFields', $Fields)->with('pager', $paginator)->render();
}
}
这里我检查是否正在发送 ID。如果是这样的话。这意味着这是第一次对某些东西进行排序。 ID 指的是列 header 名称。因此，如果单击公司名称，它将按公司名称排序。
我查看$_GET['id']设置了哪些列，查看$_GET['sorter']需要排序的方向。我将这 2 个值放入 2 session 变量中，供以后在 MarketingController 的 Sorter 函数中使用。然后我生成排序后的数据并将其放入 html table 中，在此函数中我还加载了正在排序的 table 的 table 字段名称和 load/render 分页器并将其放入 session 变量中。
最终我使用数据并将其呈现在视图中。 Ajax Success 函数将返回并附加它。
这里是MarketingController.php
的Sorter函数 function Sorting($column, $direction)
{
$data = $this->db->GetAll("mid", "50", true, true,"$column", "$direction");
$Fields = $this->db->GetFieldnames("mid", false);
$paginator = $data->appends(['sort' => $direction ])->render("pagination::bootstrap-4");
\Session::put('pager', $paginator);
\Session::put('data', ["col" => $column, "dir" => $direction]);
\Session::put('fields', $Fields);
$returnview = view("Beheer.Dashboard.components.Marketing.tableLeads")->with('Leads', $data)->with('MidTableFields', $Fields)->with('pager', $paginator)->render(); // returning it to the view.
echo json_encode($returnview); // returning it to the Ajax call.
}
但是如果我们想通过 table 分页怎么办？单击分页按钮时，不会发送任何 ID。所以它会尝试获取我在 session 变量中输入的所有值。我重复使用它们来获取我的数据并呈现一个新视图。这将产生分页器点击的第二页或任何页面。 Ajax 成功函数
也将追加此解决方案的缺点：
我还没有弄清楚为什么以及如何解决此解决方案产生的问题。但现在的问题是：如果你按例如分页器的第三个按钮。将加载正确的数据。但是分页器不会更新以使第 3 个按钮处于活动状态。
Begmuhammet Kakabayev 的巨大支持。帮助我走出困境，让我走上通往完整解决方案的正确道路！