vue-pagination-router-filter

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
<div id="app">
  <h2>page {{currentPage}}</h2>
  <input type="text" v-model="select" placeholder="ID search">
  <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;
}

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/:select',
    name: 'page-filter'
  },{
    path: '/pages/:page',
    name: 'page' 
  }]
});

new Vue({
  router,
  data: function(){
    return {
      select: this.$route.params.select ? decodeURI(this.$route.params.select) : '',
      items: items,
      parPage: 10,
      currentPage: this.currentPage = Number(this.$route.params.page) || 1
    }
  },
  methods: {
    clickCallback: function () {
      if(this.select != ''){
        this.$router.push({ 
          name: 'page-filter', 
          params: { 
            page: this.currentPage,
            select: encodeURI(this.select) 
          }
        });
      } else {
        console.log(111);
        this.$router.push({ 
          name: 'page', 
          params: { 
            page: this.currentPage 
          }
        });
      }     
    }
  },
  computed: {
    getItems: function() {
      let self = this;
      return this.items.filter(function(item){
        return String(item.id).indexOf(self.select) !== -1;
      })
    },
    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);
    }
  },
  watch:{
    select: function(){
      this.currentPage = 1;
      this.clickCallback();
    }
  }
}).$mount('#app');