Comment implémenter la fonction de pagination dans laravel+vue

Laravel est un framework PHP populaire, tandis que Vue.js est un framework JavaScript pour créer des interfaces utilisateur. Les utiliser ensemble peut nous apporter une meilleure expérience de développement et un développement plus efficace. Lors du développement d'applications Web, vous devez utiliser la fonction de pagination pour gérer l'affichage de grandes quantités de données. Alors, comment implémenter la pagination dans Laravel et Vue ? Cet article présentera la méthode d'implémentation de pagination de Laravel et Vue.

### Pagination dans Laravel

Laravel fournit un moyen pratique d'utiliser la fonction paginate du contrôleur pour renvoyer une collection paginée. Nous pouvons implémenter la fonction de pagination via le code suivant :

$users = DB::table('users')->paginate(10);

return view('user.index', ['users' => $users]);

Dans le fichier de vue, nous pouvons utiliser l'opérateur de pagination fourni par Laravel pour mettre le contenu de la pagination dans la page HTML. Le code spécifique est le suivant :

@foreach ($users as $user)

    {{ $user->name }}

@endforeach

{{ $users->links() }}

Le $users->links() voici l'opérateur de pagination fourni par Laravel.

Dans Laravel, la pagination peut également être implémentée en spécifiant la pagination comme classe de ressources API. Dans la classe de ressources, nous pouvons utiliser les bibliothèques fractal et Paginator fournies par Laravel pour implémenter la fonction de pagination. Pour utiliser la bibliothèque Paginator, vous devez d'abord configurer les éléments suivants dans le contrôleur :

use Illuminate\Pagination\LengthAwarePaginator;

protected function paginate($items, $perPage = 15, $page = null)
{
    $page = $page ?: (Paginator::resolveCurrentPage() ?: 1);
    return (new LengthAwarePaginator($items, count($items), $perPage, $page, [
        'path' => Paginator::resolveCurrentPath(),
        'pageName' => 'page',
    ]))->appends($this->request->query());
}

Utilisez ensuite le code suivant dans la classe de ressources pour implémenter la fonction de pagination :

public function toArray($request)
{
    return [
        'data' => $this->collection,
        'links' => [
            'self' => 'link-value',
        ],
        'meta' => [
            'total' => $this->total(),
            'per_page' => $this->perPage(),
            'current_page' => $this->currentPage(),
            'last_page' => $this->lastPage(),
            'from' => $this->firstItem(),
            'to' => $this->lastItem(),
        ],
    ];
}

Pagination dans Vue

Dans Vue, nous pouvons utiliser le la bibliothèque tierce vue -pagination implémente la fonction de pagination. Il s'agit d'un composant personnalisable qui peut être facilement utilisé avec Vue.js.

Pour utiliser le composant vue-pagination, vous devez d'abord introduire le composant et l'enregistrer :

import VuePagination from 'vue-pagination-2'

export default {
  components: {
    VuePagination
  },
  data () {
    return {
      currentPage: 1,
      ...
    }
  }
}

Ensuite, vous pouvez l'utiliser comme ceci en HTML :

<vue-pagination :total="total"
                 :current-page="currentPage"
                 :per-page="perPage"
                 @paginate="loadPaginatedData"
                 :pagination-class="&#39;pagination&#39;"
                 :page-class="&#39;page-item&#39;">
</vue-pagination>

Parmi eux, total représente le nombre total de pages, currentPage représente le numéro de la page actuelle et perPage représente le numéro affiché sur chaque page. La quantité de données, l'événement paginate représente la fonction de rappel pendant la pagination.

L'utilisation du composant vue-pagination permet de personnaliser le style et les fonctions de pagination, et il est relativement simple à utiliser.

Résumé

Dans cet article, nous avons présenté les moyens d'implémenter la pagination dans Laravel et Vue. Dans Laravel, nous pouvons utiliser la fonction paginate et la bibliothèque Paginator fournies par Laravel, ce qui est très pratique. Dans Vue, nous pouvons utiliser le composant tiers vue-pagination pour rendre la fonction de pagination plus flexible et personnalisée. J'espère que cet article pourra vous aider à mieux implémenter la fonction de pagination.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!