如何在laravel中使用Bootstrap vue来包括对表的分页

我不知道如何将分页添加到表中，以便在表上显示大量数据时使页面更干净

我搜索了引导vue并学习了一些vue.js组件。。。等等，但从以下位置查看此代码：

我不明白该怎么做才能使这段代码在我的表上运行，并使表分页工作

下面是显示my.blade.php中的表的代码的外观：

<table class="table" style="border-radius:1em;  border-collapse: collapse; overflow: hidden;">
                <thead class="thead-dark">
                  <tr>
                    <th scope="col">Id</th>
                    <th scope="col">E-mail</th>
                    <th scope="col">Type_compte</th>
                    <th scope="col">District</th>
                    <th scope="col">Cds</th>
                    <th scope="col">crée a</th>
                    <th scope="col">Verifié</th>
                    <th scope="col">modifier</th>
                    <th scope="col">supprimer</th>
                  </tr>
                </thead>
                @foreach($utilisateurs as $utilisateur)
                <tr>
                        <th>{{$utilisateur->id}}</th>
                        <td>{{$utilisateur->email}}</td>
                        <td>{{$utilisateur->Type_compte}}</td>
                        <td>{{$utilisateur->district == '' ? '/' : $utilisateur->district}}</td>
                        <td>{{$utilisateur->cds == '' ? '/' : $utilisateur->cds}}</td>
                        <td>{{$utilisateur->created_at}}</td>
                        <td>{{$utilisateur->email_verified_at=='' ? 'Non' : 'Oui'}}</td>
                        <form method="GET" action="/comptes/{{$utilisateur->email}}/edit">
                          @csrf
                        <td><input type="submit" class="btn btn-warning" value="Modifier"></td> 
                        </form>                               
                        <form method="POST" action="/comptes/{{$utilisateur->email}}">
                          @method('DELETE')
                          @csrf
                        <td><input type="submit" class="btn btn-danger" value="Supprimer"></td> 
                        </form>       
                </tr>
                @endforeach
              </table>

---

我应该怎么做才能使表分页工作？最简单的方法是什么？

为什么要在这个场景中使用vue.js？我建议您使用默认的Laravel分页。文档很好地解释了一切，您可以在这里查看：

在您的情况下，可能是这样的：

@foreach($utilisateurs as $utilisateur)
                <tr>
                        <th>{{$utilisateur->id}}</th>
                        <td>{{$utilisateur->email}}</td>
                        <td>{{$utilisateur->Type_compte}}</td>
                        <td>{{$utilisateur->district == '' ? '/' : $utilisateur->district}}</td>
                        <td>{{$utilisateur->cds == '' ? '/' : $utilisateur->cds}}</td>
                        <td>{{$utilisateur->created_at}}</td>
                        <td>{{$utilisateur->email_verified_at=='' ? 'Non' : 'Oui'}}</td>
                        <form method="GET" action="/comptes/{{$utilisateur->email}}/edit">
                          @csrf
                        <td><input type="submit" class="btn btn-warning" value="Modifier"></td> 
                        </form>                               
                        <form method="POST" action="/comptes/{{$utilisateur->email}}">
                          @method('DELETE')
                          @csrf
                        <td><input type="submit" class="btn btn-danger" value="Supprimer"></td> 
                        </form>       
                </tr>
                @endforeach

{{ $utilisateurs->links() }}

代码$usilizateurs->links将在视图中生成分页

在控制器中，当您将数据传递到视图时，使用paginatenumOfRecordsPerPage，类似于$users=App\User:：paginate15；其中User是您正在访问的模型

---

否则，如果您仍然希望使用vue.js进行此操作，或者换句话说，使页面动态化，而不是每次单击分页时都重新加载，然后，您应该设置一个API端点，从中获取数据，然后您需要再次使用Vue来列出表中的记录。

非常感谢您，我的朋友，我在网上发现了这个问题：，我可以确认它有效。

@foreach($utilisateurs as $utilisateur)
                <tr>
                        <th>{{$utilisateur->id}}</th>
                        <td>{{$utilisateur->email}}</td>
                        <td>{{$utilisateur->Type_compte}}</td>
                        <td>{{$utilisateur->district == '' ? '/' : $utilisateur->district}}</td>
                        <td>{{$utilisateur->cds == '' ? '/' : $utilisateur->cds}}</td>
                        <td>{{$utilisateur->created_at}}</td>
                        <td>{{$utilisateur->email_verified_at=='' ? 'Non' : 'Oui'}}</td>
                        <form method="GET" action="/comptes/{{$utilisateur->email}}/edit">
                          @csrf
                        <td><input type="submit" class="btn btn-warning" value="Modifier"></td> 
                        </form>                               
                        <form method="POST" action="/comptes/{{$utilisateur->email}}">
                          @method('DELETE')
                          @csrf
                        <td><input type="submit" class="btn btn-danger" value="Supprimer"></td> 
                        </form>       
                </tr>
                @endforeach

{{ $utilisateurs->links() }}