預覽

樣式及省略號規則可自行調整

使用方法

<!--分頁器-->
<div class="organ-res-page" style="text-align: right;" v-if="testCardsNum > pageSize">
　　<navigation :pages="pages" :current.sync="pageNo" :pagetotal="testCardsNum" :pagesize="pageSize" @navpage="pageList"></navigation>
</div>

<script type="text/javascript" src="../js/pagination.js"></script>
<script>
var vm = new Vue({
　　el:"",
　　data:{
 
　　　　pageNo: 1,
　　　　pages: 1,
　　　　pageSize: 20,
　　　　testCardsNum: 1,
　　},
　　methods:{
　　　　pageList:function(curPage) {
　　　　　　//根據當前頁獲取資料
　　　　　　cardInfo.pageNo = curPage;
　　　　}
　　}
})
</script>

pagination.js

/**
 * author:
 * createTime:
 * title: 分頁元件
 */
var pageComponent = Vue.extend({
    template: '<nav aria-label="Page navigation">
 
'+
        '<ul class="pagination pagination-sm">'+
        '<li class="page-item" :class="{\'disabled\':pages==pages}">'+
        '<span style="border: none">共 {{pagetotal}} 條記錄，每頁顯示：{{pagesize}}條</span>'+
        '</li>'+
        '<li class="page-item" :class="{\'disabled\':curPage==1}">
 
'+
        '<a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous">'+
        '<span aria-hidden="true">上一頁</span>'+
        '</a>'+
        '</li>'+
        '<li v-for="page in showPageBtn" class="page-item" :class="{\'active\':page==curPage}">'+
        '<a href="javascript:;" v-if="page" @click="goPage(page)">{{page}}</a>'+
        '<a href="javascript:;" v-else>···</a>'+
        '</li>'+
        '<li class="page-item" :class="{\'disabled\':curPage==pages}">'+
        '<a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next">'+
        '<span aria-hidden="true">下一頁</span>'+
        '</a>'+
        '</li>'+
        '<li class="page-item">'+
        '<input type="number" class="pull-left" name="curentPage" ' +
        'style="width: 50px;height: 30px;text-align: center;color: #777" maxlength="9" ' +
        'v-model="toPage" :max="pages" min="1">'+
        '<a class="go" style="margin-left: 0;" @click="gotoPage">GO</a>'+
        '</li>'+
        '</ul>'+
        '</nav>',
    // 使用者元件傳遞資料
    props: {
        pages: {
            type: Number,
            default: 1
        },
        current: {
            type: Number,
            default: 1
        },
        pagetotal: {
            type: Number,
            default: 0
        },
        pagesize: {
            type: Number,
            default: 20
        }
    },
    data:function (){
        return{
            curPage:1,
            toPage:1
        }
    },
    computed: {
        // 顯示分頁按鈕
        showPageBtn:function() {
            var pageNum = this.pages; // 總頁數
            var index = this.curPage; // 當前頁
            var arr = [];
            if (pageNum <= 6) {
                for (var i = 1; i <= pageNum; i++) {
                    arr.push(i)
                }
                return arr
            }
            // 對頁碼顯示進行處理，動態展示
            if (index <= 3) return [1, 2, 3, 4, 0, pageNum];
            if (index >= pageNum - 1) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
            if (index === 4) return [1, 2, 3, 4, 5, 0, pageNum];
            if (index === pageNum - 2) return [1, 0, pageNum - 4, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
            return [1, 0, index - 1, index, index + 1, 0, pageNum];
        }
    },
    methods: {
        goPage:function(page) {
            if (page != this.curPage) {
                this.curPage = page;
                this.$emit('navpage', this.curPage);
            }
        },
        gotoPage:function () {
            if (this.toPage > this.pages) {
                this.toPage = this.pages;
            }
            if (this.toPage < 1) {
                this.toPage = 1;
            }
            this.curPage = this.toPage;
            this.$emit('navpage', this.curPage);
        }
    }
});
Vue.component('navigation', pageComponent); // 註冊元件

css

.organ-res-page{-webkit-user-select: none;user-select: none;-moz-user-select: none;-ms-user-select: none;}
.organ-res-page .page-item a{color: rgba(0,0,0,0.65);}
.organ-res-page .active a{color: #fff;background: #4C80FF}
.organ-res-page .page-item a:hover{background:  #fff;}
.organ-res-page .active a:hover{background: #337ab7}
.organ-res-page .next a:hover{background:  #fff;}
.organ-res-page .prev a:hover{background:  #fff;}
.organ-res-page .prev a{color: rgba(0,0,0,0.65);}
.organ-res-page .next a{color: rgba(0,0,0,0.65);}
.organ-res-page ul li a{margin: 0 3.4px;}
#go-page{margin: 0 5px;background: #FFFFFF;border: 1px solid #D9D9D9;border-radius: 4px;width: 40px;height: 30px;}
.organ-res-page .page-text{float: left;margin: 0 1%;line-height: 30px;font-size: 14px;color: rgba(0,0,0,0.65);}
.organ-res-page .no-active a{color: rgba(0,0,0,0.25);border-color: #D9D9D9}