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

検証環境

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

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

プログラム動作例

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

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

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

名称説明
namepaginate-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>

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

名称説明
forpaginateコンポーネントの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を使用したページネーションの実装方法とスタイルのカスタマイズ方法を紹介しました。