如何从 laravel 刀片访问 JS 中的所有 foreach 循环数据？

Question

I am displaying data in foreach loop in laravel blade where I only display ten records per page and I have used pagination for showing all records. Now I want to develop a search or filter functionality in the table but the search can only be applied on one page of the pagination. Is there any way to access all the foreach loop data in the script tag?

Here is my foreach loop and links for pagination:

<tbody>
                         @foreach($books as $book)
                            <tr>
                                <td>{{ $book->isbn }}</td>
                                <td><a href="{{ route('books.show', $book->id) }}">{{ $book->name }}</a></td>
                                <td>{{ $book->sale_price }}</td>
                                <td>{{ $book->stock }}</td>
                                <td>{{ Str::limit($book->description, 10) }}...</td>
                                <td>{{ $book->category->name }}</td>
                                
                                <td class="text-center">
                                    <ul class="icons-list">
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                <i class="icon-menu9"></i>
                                            </a>

                                            <ul class="dropdown-menu dropdown-menu-right">
                                                <li><a href="{{ route('books.edit', $book->id) }}"><i class="icon-pencil7"></i>Edit</a></li>
                                                
                                                <li><a href="{{ route('books.changePdf', $book->id) }}"><i class="icon-file-pdf"></i>Change PDF File</a></li>
                                                
                                                <li><a href="#" data-toggle="modal" data-target="#modal_theme_danger_{{ $book->id }}">
                                                    <i class="icon-bin"></i>Delete PDF</a>
                                                </li>

                                                
                                            </ul>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                           @endforeach
</tbody>  
<div class="text-center">{{ $books->links() }}</div>  

Here is the textbox for search functionality:

<div class="row">
  <div class="col-sm-6">
    <label for="txtSearch">Search:</label>
    <input type="text" id="txtSearch" name="txtSearch" class="search form-control" onkeyup="myFunction()">  
  </div>
</div>  

Here is my JS code:

<script type="text/javascript">
function myFunction() {
          // Declare variables
          var input, filter, table, tr, td, i, txtValue;
          input = document.getElementById("txtSearch");
          filter = input.value.toUpperCase();
          table = document.getElementById("tblSearch");
          tr = table.getElementsByTagName("tr");

          // 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")[1];
            if (td) {
              txtValue = td.textContent || td.innerText;
              if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
              } else {
                tr[i].style.display = "none";
              }
            }
          }
        }
    </script>  

The script can search for the given data in the current page of the pagination but cannot apply the search on all the data of the pagination. Any help is appreciated in advance.

Answer 1

Unfortunately, unless you want to use the search button to call a search route, I don't think you can. Javascript has to work with the data that it has. So every time you fetch paginated data, Javascript only has access to this data. Again I would suggest linking the search button to a function (using Ajax to call the route if you like) and then fetching the new data based on your params.