Question

它只检索当前页面上的数据，而不是数据库中的所有数据。我如何获取它以过滤所有记录而不是当前页面上的记录。我正在使用laravel作为后端和javascript搜索过滤器功能。我有10条记录在表上分页显示为5条记录。我可以过滤搜索5条记录，但不能过滤全部10条记录。其余记录我只能在转到第二页时进行过滤

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12 col-md-offset-0">
            <div class="panel panel-default">

              <div class="form-group">

                <div class="panel-heading">Admin Dashboard <a href ="/users/index" style="margin-left:50px">USERS</a></div>
              <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">


              <div class="panel-body">
                    @if (session('message'))
                        <div class="alert alert-success">
                            {{ session('message') }}
                        </div>
                    @endif

                @if ($orders->count() == 0)
                    <p>No orders yet.</p>


                @else

                    <div class="table-responsive">
                        <table class="table table-striped table-bordered" id="myTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th >Customer Name</th>
                                    <th>Address</th>
                                    <th>Phone</th>
                                    <th>Delivery date</th>
                                    <th>Type</th>
                                    <th>Flavor</th>
                                    <th>Frosting</th>
                                    <th>How many</th>
                                    <th>Price</th>
                                    <th>Instructions</th>
                                    <th>Status</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($orders as $order)
                                    <tr>
                                        <td>{{ $order->id }}</td>
                                        <td>{{ $order->customer->name }}</td>
                                        <td>{{ $order->address }}</td>
                                        <td>{{ $order->phone }}</td>
                                        <td>{{ $order->delivery }}</td>
                                        <td>{{ $order->size }}</td>
                                        <td>{{ $order->flavor }}</td>
                                        <td>{{ $order->toppings }}</td>
                                        <td>{{ $order->number }}</td>
                                        <td>{{ $order->price }}</td>
                                        <td style="max-width:200px"><textarea>{{ $order->instructions }}</textarea></td>
                                        <td><a href="{{ route('admin.orders.edit', $order) }}">{{ $order->status->name }}</a></td>
                                        <td><a href="{{ route('admin.orders.destroy', $order) }}"> <button class = "btn btn-danger btn-sm" >Delete</button></a></td>

                                    </tr>
                                @endforeach
                            </tbody>

                        </table>

                    </div> <!-- end table-responsive -->

                @endif
              <div id="links">  {{$orders->links()}}</div>



                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
function myFunction() {
  // Declare variables
  var input, filter, table, tr, td,links, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  links=document.getElementById("links");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];

    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>
@endsection

Answer 1

如果不进行另一个API调用，则无法过滤未从beckend获取的数据。您可以使用过滤器进行另一个API调用（然后对答案进行分页），或者从服务器检索所有数据并仅对显示目的进行分页（一点也不推荐）

Answer 2

将您的Javascript过滤器发布到存储在会话中的控制器中，在loadController中检索该会话变量并在分页之前过滤

我正在尝试过滤搜索已分页的表

2 个答案: