как использовать Bootstrap-vue в laravel для включения нумерации страниц в таблицы - PullRequest
Новая
       41

как использовать Bootstrap-vue в laravel для включения нумерации страниц в таблицы

0 голосов
/ 23 марта 2019

Я не знаю, как добавить нумерацию страниц в таблицы, чтобы сделать страницы более чистыми, когда у меня есть много данных для отображения в таблицах.

Я искал 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>

iЯ не понял, что мне нужно сделать, чтобы этот код выполнялся на моих таблицах, и чтобы нумерация страниц работала.

Вот как выглядит код, который показывает таблицы в моем .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>

что я должен сделать, чтобы сделать нумерацию таблиц?и какой самый простой способ сделать это?

1 Ответ

1 голос
/ 23 марта 2019

Почему именно вы хотите использовать 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); где Пользователь - модель, к которой вы обращаетесь.

В противном случае, если вы все еще хотите использовать vue.js дляэто, или другими словами, чтобы сделать страницу динамической и не перезагружать каждый раз, когда вы нажимаете на нумерацию страниц, тогда вам нужно настроить конечную точку API, где вы получаете данные, а затем вам нужно снова использовать Vue, чтобы перечислить записи в вашемтаблица.

...