はじめに
既にある書籍検索機能で、「検索」ボタンを押下した際に表示される検索結果をページネーションします。
以前の自分に教えてわかるくらいに書きたいと思います。
自己紹介
Vue.jsはこの機会にと勉強中、JSは業務で少し修正したことがある程度、HPを自分で作っていたことがあり、Javaがメインのエンジニアを名乗っています。
環境
ブラウザ：chrome
Vue.jsのバージョン
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
を使用。
参考
[Vue.js2.x]ページ番号付きのページネーション（ページナビゲーション）を実装する
https://kuroeveryday.blogspot.com/2017/10/pagination-with-vue2.html
大筋の手順
1, ローカルで同じようになるか試してみる（サンプル作成）
2, 既存画面にサンプルをそのまま埋め込む
3, サンプル部分に、検索結果を連動させる
1, ローカルで同じようになるか試してみる（サンプル作成）
参考元のコードを使用。
Vue.js
- jsファイルを作る（例：main.js）
- サンプルコードをそのままコピペ
HTML
- HTMLファイルを作る（例：test.html）
- ひな形を作ってタグの中にサンプルコードを入れる
- Vue.jsを使えるように以下を入れる
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
- さっき作ったJSファイルを使えるようにする
<script src="/static/main.js"></script>
↓ ↓ ↓ まとめると、、、
<!DOCTYPE html>
<html lang="jp">
<head>
<title>サンプル</title>
</head>
<body>
<div id="app" class="container">
<nav>
<ul class="pagination">
<li class="page-item">
<a @click="first" class="page-link" href="#">«</a>
</li>
<li class="page-item">
<a @click="prev" class="page-link" href="#"><</a>
</li>
<li
v-for="i in displayPageRange"
class="page-item"
:class="{active: i-1 === currentPage}">
<a @click="pageSelect(i)" class="page-link" href="#">{{ i }}</a>
</li>
<li class="page-item">
<a @click="next" class="page-link" href="#">></a>
</li>
<li class="page-item">
<a @click="last" class="page-link" href="#">»</a>
</li>
</ul>
</nav>
<ul class="list-group">
<li v-for="item in displayItems" class="list-group-item">
{{ item.text }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
2, 既存画面にサンプルをそのまま埋め込む
JSファイルに埋め込む時、まるっとは埋め込めないので、種別ごとに挿入していきます。
data
var app = new Vue({
el: '#app',
data: {
・・・
},
に該当する部分は既存ファイルにあると思います。
なので、サンプルのdata{}部分の中身を追加します。
なお、最後の変数以外は","区切りなので、忘れずに入れます。
Vue.jsではdataに入れた変数は、バインドしてくれます。
var app = new Vue({
el: '#app',
data: {
・・・,
currentPage: 0, // 現在のページ番号
size: 10, // 1ページに表示するアイテムの上限
pageRange: 10, // ページネーションに表示するページ数の上限
items: [] // 表示するアイテムリスト
},
methods、mounted、computed（フック）
dataの他にメソッドみたいのがありますが、これらはフックという名称のようです。
埋め込み先に既にある場合は、同じように考えて中身を挿入していきます。
ない場合は、","区切りに気を付けて、フックごと追加します。
HTML
表示したいところにそのまま埋め込めばOKです。
注意すること
- 変数名が既存システムと被らないようにする
- Vue.jsのバージョンが2.X.Xでない場合は他を参照する
これでサーバーを介しても、検索結果とページネーションの部品が表示されるようになりました。
3, サンプル部分に、検索結果を連動させる
Vue.js
基本的に、変数名を変えるだけです。
data：item[]、mounted{}は使わないので削除する。
var app = new Vue({
el: '#app',
data: {
・・・,
currentPage: 0, // 現在のページ番号
size: 6, // 1ページに表示するアイテムの上限
pageRange: 10 // ページネーションに表示するページ数の上限
},
method{}は、<<（先頭ページ）、<（前ページ）、>（次ページ）、>>（最終ページ）の処理なのでそのまま。
computed{}
- pages()：ナビゲーションバーのページ数。itemsを検索結果が入っている変数に置き換える。
- displayPageRange()：pages()で求めたページ数を使い、ナビゲーションバーの始まり～終わりの数字を配列にして返す。そのままにする。
- displayItems()：returnの変数名を、検索結果が入っている変数に変える。
- isSelected (page)：現在のページか判定。そのまま。
HTML
基本的にそのまま。
これで検索結果がページネーションされるようになりました。
まとめ
ほぼそのまま使えます。
素晴らしいです、ありがとうございます。
感想
初投稿です。
途中2番の段階で既存システムとバージョンが合わないサンプルを使っていたので、サンプルと既存とどちらかが動かない状態になってハマったりしました。
Vue.jsは個人的にはとっつきにくい感じで、mounted{}はもう少し複雑なシステムだったら使うのかなと思いました。
参考
-
[Vue.js2.x]ページ番号付きのページネーション（ページナビゲーション）を実装する
https://kuroeveryday.blogspot.com/2017/10/pagination-with-vue2.html