2015/07/08

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

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

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


追記: 2017/10/26 8:00
当記事のVue.jsのバージョンはv0.12と古いため、新しいバージョンで書き直した。
Vue@2.x+系は、以下の記事を参照してほしい。



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


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

※今回は、Bootstrapを使っています。そのため見た目がちょっと変わります。
<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ページ番号付きのページネーション</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="page-demo">
<div id="pagination">
    <ul class="pagination">
        <li v-on="click: showFirst" class="{{isStartPage ? 'disabled' : ''}}"><a>&laquo;</a></li>
        <li v-on="click: showPrev" class="{{isStartPage ? 'disabled' : ''}}"><a>&lt;</a></li>
        <li v-on="click: showPage($index)" class="{{page == $index ? 'active': ''}}" v-repeat="pageCount"><a>{{$index + 1}}</a></li>
        <li v-on="click: showNext" class="{{isEndPage ? 'disabled' : ''}}"><a>&gt;</a></li>
        <li v-on="click: showLast" class="{{isEndPage ? 'disabled' : ''}}"><a>&raquo;</a></li>
    </ul>
</div>
<ul>
    <li v-repeat="data: dipsItems">{{data.key}} - {{data.value}}</li>
</ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
<script src="index.js"></script>

</body>
</html>

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で書き直そうと思います。

      削除