如何在 laravel 中使用 Bootstrap-vue 将分页包含在表格中

Question

我不知道如何向 tables 添加分页，以便在 tables 上显示大量数据时使页面更清晰。

我搜索了 bootstrap-vue 并学习了一些 Vue.js（组件...等）但是从以下位置看到了这段代码： https://bootstrap-vue.js.org/docs/components/pagination-nav/

    <template>
      <div class="overflow-auto">
      <b-pagination-nav :link-gen="linkGen" :number-of-pages="10" use- router />
      </div>
    </template>

    <script>
      export default {
        methods: {
          linkGen(pageNum) {
            if (pageNum === 1) {
              return '?'
            } else {
              return '?page=' + pageNum
            }
          }
        }
      }
    </script>

我不明白我应该怎么做才能在我的 table 上制作此代码运行，并使 table 分页正常工作。

这是在我的 .blade.php 中显示 table 的代码的样子：

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

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

Answer 1

为什么要在这种情况下使用 vue.js？我建议你使用默认的 Laravel 的分页。文档解释得很好，你可以在这里查看：https://laravel.com/docs/5.8/pagination

在你的情况下，它会是这样的：

@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() }}

代码 $utilisateurs->links() 将在视图中生成分页。

并且在控制器中，当您将数据传递给视图时，您使用 paginate(numOfRecordsPerPage) 类似这样的东西 $users = App\User ::paginate(15); 其中 User 是您正在访问的模型。

否则，如果你还想为此使用vue.js，或者换句话说，让页面动态化，而不是每次点击分页时都重新加载，那么你应该设置一个API 获取数据的端点，然后您需要再次使用 Vue 列出 table.

中的记录

如何在 laravel 中使用 Bootstrap-vue 将分页包含在表格中

how to use Bootstrap-vue in laravel to include pagination to tables

pagination

laravel

bootstrap-vue