2015/07/08

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

以前、『Vue.jsだけでページナビゲーション(ページネーション)をつくる』という記事を投稿した。
それをちょっと改良してページ番号付きのページネーションをつくってみた。

普通のページネーションをつくる場合は、以下の記事を参考にしてほしい。



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


前回からレベルアップしたポイントは、以下のとおり。
  • ページ番号クリックで、そのページに移動する処理を追加
  • 最初のページ、最後のページに移動する処理を追加

※今回は、Bootstrapを使っています。そのため見た目がちょっと変わります。

new Vue({
    el: '#page-demo',
    data:{
        page: 0,
        dispItemSize: 3,
        data: [
            {key: '1', value: 'value1'},
            {key: '2', value: 'value2'},
            {key: '3', value: 'value3'},
            {key: '4', value: 'value4'},
            {key: '5', value: 'value5'},
            {key: '6', value: 'value6'},
            {key: '7', value: 'value7'},
            {key: '8', value: 'value8'},
            {key: '9', value: 'value9'},
            {key: '10', value: 'value10'}
        ]
    },
    methods:{
        showFirst: function() {
            this.page = 0;
        },
        showPrev: function() {
            if (this.isStartPage) return;
            this.page--;
        },
        showNext: function() {
            if (this.isEndPage) return;
            this.page++;
        },
        showLast: function() {
            this.page = Math.floor((this.data.length - 1) / this.dispItemSize);
        },
        showPage: function(index) {
            this.page = index;
        }
    },
    computed:{
        dipsItems: function() {
            var startPage = this.page * this.dispItemSize;
            return this.data.slice(startPage, startPage + this.dispItemSize);
        },
        isStartPage: function(){
            return (this.page == 0);
        },
        isEndPage: function(){
            return ((this.page + 1) * this.dispItemSize >= this.data.length);
        },
        pageCount: function() {
            return Math.ceil(this.data.length / this.dispItemSize);
        }
    }
});
こんな感じで実装できる。


prevやnextの詳細については、『Vue.jsだけでページナビゲーション(ページネーション)をつくる』を参照してほしい。

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

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


最初のページ、最後のページも同様。
「最初のページに移動」なら、現在のページ番号を0に書き換える。
「最後のページに移動」なら、現在のページ番号をページ数で書き換える。


思ったより簡単にできて、ちょっと感動しているw



以上

written by @bc_rikko

4 件のコメント :

  1. ```
    showLast: function() {
    this.page = Math.floor(this.data.length / this.dispItemSize);
    },
    ```
    this.data.length -1 すると割り切れた場合にも対応できるようになる。はずです
    this.page = Math.floor((this.data.length -1) / this.dispItemSize);

    返信削除
  2. ご指摘ありがとうございます!
    いままで全然気が付きませんでした。

    たしかに`this.data.length - 1` でshowLastが正常に動作しますね。
    記事を修正いたしました。

    返信削除
    返信
    1. 記事の修正ありがとうございます。
      とても参考になりました。ありがとうございます。

      削除
    2. お役にたてて何よりです!
      ただこの記事の内容はVue.js v0.12を基準に書いていますので、機会がありましたらVue.js v2.0で書き直そうと思います。

      削除