【Vue.js】vue-paginateでページネーションの実装方法の紹介

Vue.jsでページネーションを実現するためのライブラリにvue-paginateがあります。

公式サイトでは、表示対象の配列と1ページあたりの表示件数の指定と、ページネーションの表示するための情報を指定するだけで使用することができると記載されています。

vue-paginate：https://github.com/TahaSh/vue-paginate

今回は、vue-paginateを使用したページーネーションの使用方法、Bootstrapを使用したスタイルのカスタマイズ方法を紹介していきます。

ページネーションを実現するためのライブラリにvuejs-paginateという似た名前のライブラリがあるため注意してください。紹介するのは、vue-paginateになります。

vuejs-paginateを使用する場合は、次のサイトを参考にしてください。

Vue.jsでページネーションを実現するためのライブラリにvuejs-paginateがあります。公式サイトでは、シンプルなAPIで使いやすく、CSSを使用することでコンポーネントのスタイルをカスタマイズできますと記載されています。 vu...

検証環境
プログラム動作例
インストール方法
テンプレート作成
1. paginateコンポーネント
2. paginate-linksコンポーネント
スクリプト作成
まとめ

検証環境

検証に使用した環境／ライブラリを次に記載します。

Vue.js
- バージョン：2.6.12
vue-paginate
- バージョン：3.6.0
Bootstrap
- バージョン：4.5.3

プログラム動作例

vue-paginateとBootstrapを組み合わせたページネーションのプログラム動作例は、次のリンク先から確認することができます。

CodeSandbox（vue-paginate example）：https://mkn5v.csb.app/

インストール方法

vue-paginateは、次のコマンドを使用してインストールします。

npm install vue-paginate

テンプレート作成

ページネーションを表示するためのテンプレートを作成します。

vue-paginateは、デフォルトのスタイルが存在しないため、CSSを使用してカスタマイズする必要があります。Bootstrapのページネーションを適用したテンプレート例は、次のようになります。

<template>
  <div id="app" class="container-fluid">
    <paginate name="paginate-items" tag="div" :list="items" :per="10">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in paginated('paginate-items')" :key="index">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
          </tr>
        </tbody>
      </table>
    </paginate>
    <paginate-links
      for="paginate-items"
      class="pagination justify-content-center"
      :limit="3"
      :show-step-links="true"
      :step-links="{
        next: '>',
        prev: '<',
      }"
      :classes="{
        'ul.paginate-links > li': 'page-item',
        'ul.paginate-links > li > a': 'page-link',
      }"
    ></paginate-links>
  </div>
</template>

Bootstrapのページネーションのスタイルについては、次の公式サイトを確認してください。

Bootstrap（Pagination）：https://getbootstrap.com/docs/4.5/components/pagination/

paginateコンポーネント

paginateコンポーネントは、ページネーションのリストを表示するために使用します。

<paginate name="paginate-items" tag="div" :list="items" :per="10">

テンプレート例で使用しているプロパティは、次のようなものになります。

名称	説明
name	`paginate-links`コンポーネントの`for`と同じ値を指定します。`paginate-links`コンポーネントと関連づけるために使用します。このプロパティは、必ず指定してください。
tag	リストを表示するためのタグを指定します。指定しない場合は、`ul`要素で表示されます。プログラム例では、`div`を指定しています。表示するときは、`div`要素で表示されます。
:list	リストを表示するためのデータオブジェクトを指定します。このプロパティは、必ず指定してください。
:per	リストを1ページに表示するための件数を指定します。指定しない場合は、3件ごとに表示されます。プログラム例では、`10`を指定しています。表示するときは、10件ごとに表示されます。

paginateコンポーネントを使用して、リストを表示するためのデータオブジェクトの取得は、paginatedメソッドを使用します。指定するパラメータは、paginateコンポーネントのnameに指定した値になります。

<tr v-for="(item, index) in paginated('paginate-items')" :key="index">

paginate-linksコンポーネント

paginate-linksコンポーネントは、ページネーションのリスト表示を切り替えるためのリンクを表示するために使用します。

<paginate-links
  for="paginate-items"
  class="pagination justify-content-center"
  :limit="3"
  :show-step-links="true"
  :step-links="{
    next: '>',
    prev: '<',
  }"
  :classes="{
    'ul.paginate-links > li': 'page-item',
    'ul.paginate-links > li > a': 'page-link',
  }"
></paginate-links>

テンプレート例で使用しているプロパティは、次のようなものになります。

名称	説明
for	`paginate`コンポーネントの`name`と同じ値を指定します。`paginate`コンポーネントと関連づけるために使用します。このプロパティは、必ず指定してください。
:limit	ページネーションのリンクを表示する件数を指定します。指定しない場合は、すべてのページネーションのリンクを表示します。
:show-step-links	ページネーションのリンクの次へ／前へのボタンの表示有無を指定します。
:step-links	ページネーションのリンクの次へ／前へボタンに指定するテキストを指定します。 `next`は、次へボタンのテキストの指定になります。 `prev`は、前へボタンのテキストの指定になります。
:classes	ページネーションのリンクに適用するスタイルを指定します。 `li`要素にクラス名を指定する場合は、`'ul.paginate-links > li': 'page-item'`のようになります。 `li`要素のなかの`a`要素にクラス名を指定する場合は、`'ul.paginate-links > li > a': 'page-link'`のようになります。

paginate-linksコンポーネントは、リンクの種類を変更することもできます。種類を変更するためのプロパティについては、次の公式サイトを確認してください。

vue-paginate（paginate-links types）：https://github.com/TahaSh/vue-paginate#types-of-paginate-links

表示した公式サイトでリンク先がずれてしまうことがあります。
ブラウザのページ内検索などを使用してTypes of paginate linksのキーワードで検索してみてください。

paginate-linksコンポーネントは、リンク表示のスタイルをカスタマイズすることもできます。スタイルをカスタマイズするためのプロパティについては、次の公式サイトを確認してください。

vue-paginate（paginate-links customize）：https://github.com/TahaSh/vue-paginate#links-customization

表示した公式サイトでリンク先がずれてしまうことがあります。
ブラウザのページ内検索などを使用してLinks customizationのキーワードで検索してください。

スクリプト作成

ページネーションを動かすためのスクリプトを作成します。プログラム例は、次のようになります。

<script>
import Vue from "vue";
import VuePaginate from "vue-paginate";

Vue.use(VuePaginate);

export default {
  components: {},
  data: function () {
    return {
      items: [],
      paginate: ["paginate-items"],
    };
  },
  created: function () {
    for (let i = 1; i <= 95; i++) {
      this.items.push({
        id: i,
        name: "name_" + i,
      });
    }
  },
};
</script>

プラグインの使用方法

vuejs-paginateのライブラリを使用するためプラグインとして登録します。

import Vue from "vue";
import VuePaginate from "vue-paginate";

Vue.use(VuePaginate);

...

データオブジェクトの定義

データオブジェクトで定義している情報は、次のようなものになります。

  data: function () {
    return {
      items: [],
      paginate: ["paginate-items"],
    };
  },

items：画面に表示する情報を保持します。
paginate：ページネーションのリンクを表示するための名称を保持します。
- paginateコンポーネントのnameに使用します。
- paginate-linksコンポーネントのforに使用します。

テストデータの作成

ページネーションを確認するためのテストデータの作成します。

  created: function () {
    for (let i = 1; i <= 95; i++) {
      this.items.push({
        id: i,
        name: "name_" + i,
      });
    }
  }

まとめ

vue-paginateを使用したページネーションの実装方法とスタイルのカスタマイズ方法を紹介しました。