vuejs-paginate-vue-router

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app" class="container">
  <h2>page {{currentPage}}</h2>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in getLists">
        <td>{{item.id}}</td>
        <td>{{item.title}}</td>
      </tr>
    </tbody>
  </table>
  <paginate
            v-model="currentPage"
            :page-count="getPageCount"
            :initial-page="4"
            :page-range="3"
            :margin-pages="2"
            :click-handler="clickCallback"
            :prev-text="'＜'"
            :next-text="'＞'"
            :container-class="'pagination'"
            :page-class="'page-item'">
  </paginate>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

th {
  font-weight: bold;
}

Vue

const items = [];

for(let i=1; i<=105; i++){
  items.push({
    id: i,
    title: 'item-'+i
  });
}

Vue.component('paginate', VuejsPaginate);

const router = new VueRouter({
  routes: [{
    path: '/pages/:page',
    name: 'page' 
  }]
});

new Vue({
  router,
  data: function(){
    return {
      items: items,
      parPage: 10,
      currentPage: this.currentPage = this.$route.params.page || 1
    }
  },
  methods: {
    clickCallback: function () {
      this.$router.push({ 
        name: 'page', 
        params: { 
          page: this.currentPage 
        }
      });   
    }
  },
  computed: {
    getItems: function() {
      return this.items;
    },
    getLists: function(){
      let current = this.currentPage * this.parPage;
      let start = current - this.parPage;

      return this.getItems.slice(start, current);
    },
    getPageCount: function() {
      return Math.ceil(this.getItems.length / this.parPage);
    }
  }
}).$mount('#app');