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

Question

我在laravel blade的foreach循环中显示数据，每页只显示十条记录，并且我使用分页来显示所有记录。现在我想在表中开发search or filter功能，但搜索只能应用于分页的一页。是否有任何方法可以访问script标签中的所有foreach循环数据？

这是我的foreach循环和用于分页的links：

<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>  

以下是搜索功能的textbox：

<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>  

这是我的JS代码：

<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>  

脚本可以在分页的当前页面中搜索给定的数据，但不能将搜索应用于分页的所有数据。任何帮助都会提前表示感谢。

Answer 1

不幸的是，除非您想使用搜索按钮调用搜索路线，否则我认为您不能。Javascript必须处理它所拥有的数据。因此，每次获取分页数据时，Javascript都只能访问这些数据。同样，我建议将搜索按钮链接到一个函数(如果愿意，可以使用Ajax调用路由(，然后根据参数获取新数据。