Vue.js
でページネーションを実現するためのライブラリにvue-paginate
があります。
公式サイトでは、表示対象の配列と1ページあたりの表示件数の指定と、ページネーションの表示するための情報を指定するだけで使用することができると記載されています。
vue-paginate:https://github.com/TahaSh/vue-paginate
今回は、vue-paginate
を使用したページーネーションの使用方法、Bootstrap
を使用したスタイルのカスタマイズ方法を紹介していきます。
ページネーションを実現するためのライブラリに
という似た名前のライブラリがあるため注意してください。紹介するのは、vuejs-paginate
になります。vue-paginate
vuejs-paginate
を使用する場合は、次のサイトを参考にしてください。
検証環境
検証に使用した環境/ライブラリを次に記載します。
- 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
を使用したページネーションの実装方法とスタイルのカスタマイズ方法を紹介しました。