Vue.jsでページ付きのページネーションを実装する

by bc_rikko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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>

JavaScript

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);
        }
    }
});