[Solved] Split list item and show in multiple pages inside table [closed]

by


If you want your own implementation you can filter your list of items and split it into subarrays based on how many items you want in one page. Below is an example code on how to achieve that.

Example component’s contents:

data() {
   return {
      currentPage: 1,
      itemsPerPage: 3,
      items: [{id: 1, title: 'test1'},{id: 2, title: 'test2'},{id: 3, title: 'test3'},{id: 4, title: 'test4'},{id: 5, title: 'test5'},{id: 6, title: 'test6'},{id: 7, title: 'test7'},{id: 8, title: 'test8'}]
   }
},
computed: {
   paginatedItems() {
      let page = 1;
      return [].concat.apply(
         [], 
         this.items.map( (item, index) => 
            index % this.itemsPerPage ? 
               [] : 
               { page: page++, items: this.items.slice(index, index + this.itemsPerPage)}
         )
       );
   },
   currentPageItems() {
      let currentPageItems = this.paginatedItems.find(pages => pages.page == this.currentPage);
        return currentPageItems ? currentPageItems.items : [];
   }
},
methods {
   changePage(pageNumber) {
      if(pageNumber !== this.currentPage)
           this.currentPage = pageNumber;
   }
}

Example template:

  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in currentPageItems" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.title}}</td>
      </tr>
    </tbody>
  </table>
  <div>
    <span>Page:</span>
    <button v-for="i in paginatedItems.length" class="btn btn-secondary mr-1" :class="{'btn-success' : currentPage === i }" @click="changePage(i)">
      {{i}}
    </button>
  </div>

http://jsfiddle.net/eywraw8t/334506/

solved Split list item and show in multiple pages inside table [closed]