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

Question

It only retrieves data that is on the current page, not all the data in the database.How do i get it to filter through all the records and not only the records on the current page.I am using laravel for my backend and javascript for the filter search function.I have 10 records my table paginates at 5 records.I can filter search 5 records but not the entire 10.The rest of the records i can only filter when go to the second page

@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

You can't filter data the is not fetched from the beckend without making another API call. You can either make another API call with the filter (and the pagenate the answer), or retrieve all the data from the server and make the pagination only for display porposes (not recommended at all)

Answer 2

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