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

【问题标题】：How to access all foreach loop data in JS from laravel blade?如何从 laravel 刀片访问 JS 中的所有 foreach 循环数据？
【发布时间】：2021-03-10 23:34:25
【问题描述】：

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

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

【问题讨论】：

标签： javascript laravel foreach laravel-blade

【解决方案1】：

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

【讨论】：