それをちょっと改良してページ番号付きのページネーションをつくってみた。
普通のページネーションをつくる場合は、以下の記事を参考にしてほしい。
追記: 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>«</a></li>
<li v-on="click: showPrev" class="{{isStartPage ? 'disabled' : ''}}"><a><</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>></a></li>
<li v-on="click: showLast" class="{{isEndPage ? 'disabled' : ''}}"><a>»</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に書き換える。
「最後のページに移動」なら、現在のページ番号をページ数で書き換える。
思ったより簡単にできて、ちょっと感動しているｗ
以上
written by @bc_rikko
```
返信削除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);
ご指摘ありがとうございます！
返信削除いままで全然気が付きませんでした。
たしかに`this.data.length - 1` でshowLastが正常に動作しますね。
記事を修正いたしました。
記事の修正ありがとうございます。
削除とても参考になりました。ありがとうございます。
お役にたてて何よりです！
削除ただこの記事の内容はVue.js v0.12を基準に書いていますので、機会がありましたらVue.js v2.0で書き直そうと思います。