vuejs-paginateとは

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

 

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

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

 

インストール

以下のnpmCDNを使ってインストールします。

npm

npm install vuejs-paginate --save

CDN

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

 

gitリポジトリは以下から取得できます。

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

 

導入手順

Bootstrapベースのページネーションを実装します。

1. ライブラリの取り込み

(1)webpack等の場合 ※モジュール版は未検証です。

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

(2)WEBページの場合

Vue.component('paginate', VuejsPaginate)

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

parPage1ページに表示するアイテム数を設定し、getPageCount最大のページ数を求めています。

var items = [];

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

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

 

設定内用は以下になります。

dataプロパティ

  • items・・・・・アイテムの配列
  • parPage・・・・1ページに表示するアイテム数
  • currentPage・・現在のページ番号

methods

  • clickCallback・・・ページネーションクリック時にcurrentPageへページ番号を設定

computed

  • getItems・・・・・現在ページのアイテムを返す
  • getPageCount・・・ページネーションの最大ページ数を求めるためにitemsparPageで割って切り上げている

 

3. テンプレートを準備

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

4. Bootstrapのスタイルを適応

vuejs-paginateには、デフォルトのスタイルがありません
今回はサンプルでBootstrapのスタイルを適応します。

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

 

サンプル

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

 

プロパティ

名  Type 説明
page-count Number 総ページ数。 必須
page-range Number 表示されたページの範囲 デフォルト:3
(注:アクティブページの前後に同じ数のページが表示されるように、奇数を使用することをお勧めします。偶数を使用すると、現在のページの後よりもアクティブページの前に1つ多いページ番号があります。 )
margin-pages Number 余白の表示ページ数。default: 1
prev-text String 前のボタンのテキスト。 ここでHTMLを使うことができます。default: Prev
next-text String 次のボタンのテキスト。 ここでHTMLを使うことができます。 default: Next
break-view-text String ブレークビューインジケーターのテキスト。default: …
initial-page
Deprecated after v2.0.0
Number 選択した最初のページのインデックス。default: 0
force-page Number 上書きされた選択ページのページ番号。
click-handler Function ページがクリックされたときに呼び出すメソッド。 クリックしたページ番号をパラメータとして使用してください。
container-class String レイアウトのCSSクラス名。
page-class String 各ページ要素のタグliのCSSクラス名。
page-link-class String 各ページ要素のタグaのCSSクラス名。
prev-class String 前の要素のタグliのCSSクラス名。
prev-link-class String 前の要素のタグaのCSSクラス名。
next-class String 次の要素のタグliのCSSクラス名。
next-link-class String 次の要素のタグaのCSSクラス名。
break-view-class String breakビュー要素のタグliのCSSクラス名。
break-view-link-class String タグa of breakビュー要素のCSSクラス名。
active-class String アクティブページ要素のCSSクラス名。 default: active
disabled-class String 無効なページ要素のCSSクラス名。default: disabled
no-li-surround Boolean タグを囲むliタグをサポートしない。default: false
first-last-button Boolean 最初と最後のページをめくるためのサポートボタン。 default: false
first-button-text String 最初のボタンのテキスト (first-last-buttonがfalseの場合は表示されません。ここでHTMLを使用できます。)default: ‘First’
last-button-text String 最後のボタンのテキスト (first-last-buttonがfalseの場合は表示されません。ここでHTMLを使用できます。)default: ‘Last’
hide-prev-next Boolean 前のページまたは次のページがない場合は、前/次ボタンを隠します。 default: false

 

まとめ

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

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

今日はこの辺でー

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください