Laravel AJAX 分页从旧数据中提取行

Question

我有一个表格，一旦单击按钮，我想按 Z-A 字母顺序对其内容进行排序。

这没问题。起初我遇到的问题是我返回的分页链接不正确。修复了这些，所以我不再收到 404 页面了。但是现在当我单击下一页按钮时。该表只会转到旧无序数据的下一页。

我的排序函数：

 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 进行样式设置。

分页器使用控制器中设置的选项加载。但它仍然没有显示数据..

Answer 1

这是因为{{ $Leads->links("pagination::bootstrap-4")}}根据旧参数创建链接。

起初 $direction 参数是 'asc' 所以 Laravel 根据这些参数创建链接。您应该添加到可变方向参数。

像这样的东西。 {{ $Leads->appends(['sort' => 'desc'])->links() }}

在ajax request 之后我不知道该怎么做。也许您只是在 sort button clickedsort 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);
         }

Answer 2

我将排序请求的请求类型更改为 GET。我将分页器的 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);
                }
            });
        }

我检查了在 AjaxController 中触发 ajax 请求的函数中发送了哪些参数。

我的 AjaxController 中的排序功能。

  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 是指列标题名称。因此，如果单击公司名称，它将按公司名称排序。

我查看$_GET['id']设置了哪一列，查看$_GET['sorter']需要对哪个方向进行排序。我将这 2 个值放入 2 个会话变量中，以供以后在 MarketingController 的 Sorter 函数中使用。我生成排序后的数据并将其放入一个 html 表中，在此函数中，我还加载正在排序的表的表字段名称并加载/渲染分页器并将其放入会话变量中。

最终我使用数据并将其呈现在视图中。它将由 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.
}

但是如果我们想对表格进行分页呢？单击分页按钮时，不会发送任何 ID。所以它会尝试获取我在会话变量中放入的所有值。我重用它们来获取我的数据并呈现一个新视图。这将产生分页器点击的第二页或任何页面。这也将由 Ajax 成功函数附加

此解决方案的缺点：

我还没有弄清楚为什么以及如何解决此解决方案产生的这个问题。但现在的问题是：如果你按下例如分页器的第三个按钮。将加载正确的数据。但是分页器不会更新以使第三个按钮处于活动状态。

Begmuhammet Kakabayev 的大量道具。帮助我，让我走上完整解决方案的正确道路！