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

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

公式サイトでは、シンプルなAPIで使いやすく、CSSを使用することでコンポーネントのスタイルをカスタマイズできますと記載されています。

vuejs-pagination：https://github.com/lokyoung/vuejs-paginate

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

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

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

【Vue.js】vue-paginateでページネーションの実装方法の紹介
Vue.jsでページネーションを実現するためのライブラリにvue-paginateがあります。 公式サイトでは、表示対象の配列と1ページあたりの表示件数の指定と、ページネーションの表示するための情報を指定するだけで使用することができると記載...
fumidzuki.com
2020年11月15日
スポンサーリンク

検証環境

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

  • Vue.js
    • バージョン：2.6.12
  • vuejs-pagination
    • バージョン：2.1.0
  • Bootstrap
    • バージョン：4.5.3

プログラム動作例

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

CodeSandbox（vuejs-paginate example）：https://en4v0.csb.app/

インストール方法

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

npm install vuejs-paginate

テンプレート作成

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

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

<template>
  <div id="app" class="container-fluid">
    <div>
      <table class="table table-bordered">
        <thead>
          <th>#</th>
          <th>Name</th>
        </thead>
        <tbody>
          <tr v-for="e in getItems" :key="e.id">
            <td>{{ e.id }}</td>
            <td>{{ e.name }}</td>
          </tr>
        </tbody>
      </table>
      <div>
        <vuejs-paginate
          :page-count="getPaginateCount"
          :prev-text="'<'"
          :next-text="'>'"
          :click-handler="paginateClickCallback"
          :container-class="'pagination justify-content-center'"
          :page-class="'page-item'"
          :page-link-class="'page-link'"
          :prev-class="'page-item'"
          :prev-link-class="'page-link'"
          :next-class="'page-item'"
          :next-link-class="'page-link'"
          :first-last-button="true"
          :first-button-text="'<<'"
          :last-button-text="'>>'"
        ></vuejs-paginate>
      </div>
    </div>
  </div>
</template>

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

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

コンポーネントに使用できるプロパティについて

vuejs-paginationで使用できるプロパティについては、次の公式サイトを確認してください。

vuejs-pagination（Props）：https://github.com/lokyoung/vuejs-paginate#props

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

名称説明
page-countページの総数を指定します。
プログラム例では、データオブジェクトの「画面に表示する情報」と「1ページに表示する件数」を使用して、ページ総数を取得するメソッドを指定しています。
prev-text前へのボタンのテキストに使用する情報を指定します。
プログラム例では、「<」を指定しています。
next-text次へのボタンのテキストに使用する情報を指定します。
プログラム例では、「>」を指定しています。
click-handlerページネーションがクリックされたときに実行するメソッドを指定します。クリックしたページ番号がパラメータとして使用できます。
プログラム例では、データオブジェクトの「現在の表示しているページ番号」に値を保持するためのメソッドを指定しています。
container-classul要素のCSSクラス名を指定します。
プログラム例では、'pagination justify-content-center'を指定しています。表示するときは、<ul class="pagination justify-content-center">になります。
page-class各ページ番号のli要素のCSSクラス名を指定します。
プログラム例では、'page-item'を指定しています。表示するときは、<li class="page-item">になります。
page-link-class各ページ番号のa要素のCSSクラス名を指定します。
プログラム例では、'page-link'を指定しています。表示するときは、<a class="page-link">になります。
prev-class前へのボタンのli要素のCSSクラス名を指定します。
プログラム例では、'page-item'を指定しています。表示するときは、<li class="page-item">になります。
prev-link-class前へのボタンのa要素のCSSクラス名を指定します。
プログラム例では、'page-link'を指定しています。表示するときは、<a class="page-link">になります。
next-class次へのボタンのli要素のCSSクラス名を指定します。
プログラム例では、'page-item'を指定しています。表示するときは、<li class="page-item">になります。
next-link-class次へのボタンのa要素のCSSクラス名を指定します。
プログラム例では、'page-link'を指定しています。表示するときは、<a class="page-link">になります。
first-last-button最初と最後のページに移動するためのボタンの表示有無を指定します。
プログラム例では、trueを指定しています。最初と最後のページに移動するためのボタンが表示されます。
first-button-text最初へのボタンのテキストを指定します。
プログラム例では、「<<」を指定しています。
li要素に設定されるCSSクラス名は、page-classプロパティに指定している値になります。
last-button-text最後へのボタンのテキストを指定します。
プログラム例では、「<<」を指定しています。
li要素に設定されるCSSクラス名は、page-classプロパティに指定している値になります。

スクリプト作成

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

<script>
import VueJsPaginate from "vuejs-paginate";

export default {
  components: {
    "vuejs-paginate": VueJsPaginate,
  },
  data: function () {
    return {
      items: [],
      currentPage: 1,
      perPage: 10,
    };
  },
  created: function () {
    for (let i = 1; i <= 95; i++) {
      this.items.push({
        id: i,
        name: "name_" + i,
      });
    }
  },
  computed: {
    getItems: function () {
      let start = (this.currentPage - 1) * this.perPage;
      let end = this.currentPage * this.perPage;
      return this.items.slice(start, end);
    },
    getPaginateCount: function () {
      return Math.ceil(this.items.length / this.perPage);
    },
  },
  methods: {
    paginateClickCallback: function (pageNum) {
      this.currentPage = Number(pageNum);
    },
  },
};
</script>

コンポーネントの登録方法

vuejs-paginateのライブラリを使用するためコンポーネントを登録します。

import VueJsPaginate from "vuejs-paginate";
...
  components: {
    "vuejs-paginate": VueJsPaginate
  },
...

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

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

  data: function () {
    return {
      items: [],
      currentPage: 1,
      perPage: 10,
    };
  }
  • items：画面に表示する情報を保持します。
  • currentPage：ページネーションで表示している、現在のページ番号の情報を保持します。
  • perPage：1ページに表示する件数を保持します。

テストデータの作成

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

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

表示データの取得

表示するためのデータを取得します。

データオブジェクトから、「現在の表示しているページ番号」と「1ページに表示する件数」を使用して、「画面に表示する情報」の配列の一部を取得する動作になります。

  computed: {
    getItems: function () {
      let start = (this.currentPage - 1) * this.perPage;
      let end = this.currentPage * this.perPage;
      return this.items.slice(start, end);
    },
  }

ページネーション件数の取得

ページネーションの件数を取得します。

データオブジェクトから、「画面に表示する情報」の件数を「1ページに表示する件数」で除算した結果を取得しています。

  computed: {
    getPaginateCount: function () {
      return Math.ceil(this.items.length / this.perPage);
    }
  }

ページネーションの選択情報の取得

ページネーションの数字、前後ボタン、最初最後ボタンがクリックされたときに実行されるメソッドになります。

メソッドの引数には、選択したページ番号が設定されているため、この数字をデータオブジェクトの「現在の表示しているページ番号」として保持します。

  methods: {
    paginateClickCallback: function (pageNum) {
      this.currentPage = Number(pageNum);
    },
  }

まとめ

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