Vue.jsとbootstrapを使用した際にページング処理を作成してみた。

シェアする

フリーランスエンジニアの収入例を見てみる→ IT系フリーエンジニア案件6000件以上【ギークスジョブ】

Vue.jsを使用している中でVue.jsだけでページナビゲーション(ページネーション)の処理を作りたいと思いました。

Vue.jsでページ番号付きのページネーションをつくる

上記ページを参考にページングの処理を作成したのですが、Vue.jsのバージョンの違いなのかうまく動作しない所があったり、1ページのみのデータしかない際にも10ページ分のページナビゲーションが表示されてしまったりなどがあったため、上記のページを参考にページナビゲーションの処理を作り直してみました。
Vue.jsのバージョンは、2.5.2です。

ページナビゲーションのソース

ページナビゲーションの実際の動作

実際のページングの処理の動作は、下記のようになります。dataの中身を変えていただけると、1ページのみの表示や7ページのみの表示の時などの動作を試すことが出来ます。

実際の処理の説明

ページ番号の付け方については、「v-repeat(ページ数)」として、liタグをページ数分追加しているだけ。ちなみに$indexはゼロ始まりなので、プラス1している。
pageに現在のページ番号を保持しているので、$indexとpageが同じなら、classにactiveを、それ以外なら何も設定しないようにしている。

ページ番号をクリックしたときは、現在のページ番号を$indexで書き換えているだけ。

最初のページ、最後のページも同様。
「最初のページに移動」なら、現在のページ番号を0に書き換える。
「最後のページに移動」なら、現在のページ番号をページ数で書き換える。
Vue.jsでページ番号付きのページネーションをつくる

基本的なページングの処理は、参考にさせていただいたページの処理と変わりません。
Vue.jsのバージョンの違いなのかエラーが表示されてしまう所は、修正いたしました。
ページ番号のつけ方に関しては、v-repeatではなくv-forを使用したり若干修正しました。

また、大きな変更点としては、computedにneighborPagesのメソッドを追加したことです。
このneighborPagesは、データが1ページ分しかない際にも10ページ分のページが表示されてしまうなどの不具合の解消のために作成しました。
ちょとわかりずらいロジックになってしまっているので、はじめにページングするページ数などを計算するなど、もっといいロジックがあると思います。

もし、Vue.jsでページング処理を作成しようとしている人の参考になれば幸いです。

本当は、ページごとに非同期でDBから必要なデータのみを取り出すと良いのでしょうね。

シェアする

フォローする