try:Vue分頁

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.6/vue.min.js"></script>
<!--try: vue pager(1.x)-->
<!--data section-->
<ul>
    <li v-for="user in users | filterBy searchKey | paginate">{{ user.name }}</li>
</ul>
<!--paging section-->
<ul class="pagination">
<li><a href="#" @click="setPage(0)" >«</a></li>
<li v-for="pageNumber in totalPages" >
    <a href="#" @click="setPage(pageNumber)"  :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages - 1 ), first:(pageNumber == 0 )}">{{ pageNumber+1 }}</a>
    </li>
<li><a href="#" @click="setPage(totalPages)">»</a></li>
</ul>

CSS

/*ul {
  padding: 0;
  list-style-type: none;
}
li {
  display: inline;
  margin: 5px 5px;
}*/

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}


.pagination li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

ul.pagination li a.current {
    background-color: #8baaed;/*#6892ed;*/
    color: white;
    border: 1px solid #8baaed;
}

ul.pagination li a:hover:not(.current) {background-color: #ddd;}

JavaScript

/*import external vue.js: 1.0.6 version*/
new Vue({
    el: 'body',
    
    data: {
        users: [          
            {"id":1, "name":"Tom"},
            {"id":2, "name":"Kate"},
            {"id":3, "name":"Jack"},
            {"id":4, "name":"Jill"},
            {"id":4, "name":"bill"},
            {"id":4, "name":"aill"},
            {"id":4, "name":"cill"},
            {"id":4, "name":"dill"},
            {"id":4, "name":"eill"},
            {"id":4, "name":"cill"},
            {"id":4, "name":"dill"},
            {"id":4, "name":"eill"},
            {"id":4, "name":"cill"},
            {"id":4, "name":"dill"},
            {"id":4, "name":"eill"},
            {"id":4, "name":"cill"},
            {"id":4, "name":"dill"},
            {"id":4, "name":"eill"},
            {"id":4, "name":"cill"},
            {"id":4, "name":"dill"},
            {"id":4, "name":"eill"},
            
        ],
        searchKey: '',
        currentPage: 0,
        itemsPerPage: 5,
        resultCount: 0
    },
    computed: {
        totalPages: function() {
          return Math.ceil(this.resultCount / this.itemsPerPage)
        }
    },
    methods: {
        setPage: function(pageNumber) {
          this.currentPage = pageNumber
        }
    },
    filters: {
        paginate: function(list) {
            this.resultCount = list.length
            if (this.currentPage >= this.totalPages) {
              this.currentPage = this.totalPages - 1
            }
            var index = this.currentPage * this.itemsPerPage
            return list.slice(index, index + this.itemsPerPage)
        }
    }
})