「vuejs-paginate」を使ってページネーションを実装する

vuejs-paginateとは

「vuejs-paginate」は、ページネーションを実装するライブラリです。

シンプルなAPIで提供されており、容易に実装することができます。
CSSによってページネーションコンポーネントのスタイルをカスタマイズすることができます。

【動画サイズ：139KB】

検証環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, CDNのどれか一つを使用します。

npm install vuejs-paginate --save 

<script src="https://unpkg.com/[email protected]"></script>

直接「vuejs-paginate」のリポジトリを取得する場合は、以下のURLから取得できます。

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
今回のサンプルはBootstrapベースのページネーションを実装します。

ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の２通りの呼び出しを選択します。
コンパイラを使用しない場合は、UMDを使ってください。

ES6等で実装する場合

import Paginate from 'vuejs-paginate' 
Vue.component('paginate', Paginate)

UMDで実装する場合

Vue.component('paginate', VuejsPaginate)

ページネーションメソッドを設定

サンプル用にforを使って、リスト用の配列itemsを設定します。

dateのperPageに1ページに表示するアイテム数を設定します。
またitemsにリストを設定します。

computedの、getItemsで1ページに表示する数を計算します。
またgetPageCountで全体のページ数を計算します。

var items = [];

for(var i=1; i<=105; i++){
  items.push('item-'+i);
}

new Vue({
   el: '#app',
   data: {
     items: items,
     <strong>perPage</strong>: 10,
     currentPage: 1
   },
   methods: {
    clickCallback: function (pageNum) {
       this.currentPage = Number(pageNum);
    }
   },
   computed: {
     getItems: function() {
       let current = this.currentPage * this.perPage;
       let start = current - this.perPage;
       return this.items.slice(start, current);
     },
     getPageCount: function() {
       return Math.ceil(this.items.length / this.perPage);
     }
   }
 })

テンプレートを準備

<paginate> を設置します。

page-countは、全てのページの総数を設定します。
今回は、上記で作成したgetPageCountを設定します。

その他のプロパティについては、こちらをご確認ください

<div id="app">
  <ul>
    <li v-for="item in getItems">{{item}}</li>
  </ul>
  <paginate
    :page-count="getPageCount"
    :page-range="3"
    :margin-pages="2"
    :click-handler="clickCallback"
    :prev-text="'＜'"
    :next-text="'＞'"
    :container-class="'pagination'"
    :page-class="'page-item'">
  </paginate>
</div>

Bootstrapのスタイルを適用

vuejs-paginateには、デフォルトのスタイルがありません。

今回はサンプルでBootstrapのスタイルを適用します。
以下のCDNを呼び出します。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">

サンプル

>>専用ページで確認する

プロパティ

フィルター付きのリストを作る

フィルター付きリストにページネーションを付けるにはどうしたら良いだろう？
そう思ったら下記の記事を参考にしてください。

ブラウザバックしてもページネーションを維持させる

管理画面を作っていると良くあるのですが、記事の更新してブラウザバックで一覧ページに戻った時に、ページネーションが解除されてしまう現象。これを解決するために以下の記事を書きました。

ページネーションをクリックしてトップへスムースクロールする

長いリストの下部にあるページネーションでページを移動した時に、リストの中身が変わるものの、上までスクロールする必要があったのが面倒だったので、自動的にトップへスムースクロールするように変更しました。

まとめ

ページネーションを実装するライブラリでした。

非常に直感的でシンプルにAPIがまとめられていたので、サンプルを作るのも苦労無く行えました。
テーブル系のライブラリを使う時以外のページネーションは、これを使えば良さそうですね。

今日はこの辺でー