VueJS Pagination

I've written about pagination before, and it's something I'm interested in so when the chance came to write a component that dealt with it at work I jumped at the chance. Rather than using any of the other techniques I've used in the past, this component was using VueJS, and I knew I'd get some data via a message bus. The data was in the form of an object with just three numbers: the current page selected, the total number of items and the number of items for display on each page.

The total number of items could range from one to many; the number of pages could also be massive depending upon the page size selected by the user.

As well as wanting to display a sensible number of page numbers to the user, I also wanted to decorate the pagination. The decoration needed to have the ability to jump three pages back and forth as well as a quick way of navigating to the first and last page.

So I did what I usually do and fired up JSFiddle to work up a quick prototype and came up with this. I've not included the message bus, but I'm instead using values within the data of the component. While I know it's not good form to alter the data within the component; I'm doing so here for illustration purposes.

Logic splits between the markup and the JS, but I quite like that for some reason.

HTML

<div id="app">
  <ol v-if="totalPages > 0"
      aria-label="Pagination navigation">
    <li v-on:click="paginationOptions.page = 1"             
        aria-label="Go to the first page"             
        title="Go to the first page"            
        v-bind:class="{                
          'disabled': paginationOptions.page === 1            
        }">
      <div class="content">&larr;</div>
    </li>
    <li v-if="totalPages > 3 && paginationOptions.page - 2 >= 1"             
        v-on:click="paginationOptions.page = (paginationOptions.page - 3 < 1) ? 1 : paginationOptions.page - 3"             
        aria-label="Jump three pages backward"             
        title="Jump three pages backward">
      <div class="content">…</div>
    </li>
    <li v-for="page in pages"             
        v-bind:key="page"             
        v-on:click="paginationOptions.page = page"             
        v-bind:aria-label="(page === paginationOptions.page) ? 'Current page, page ' + page : 'Go to page ' + page"             
        v-bind:aria-current="page === paginationOptions.page"             
        v-bind:title="(page === paginationOptions.page) ? 'Current page, page ' + page : 'Go to page ' + page"            
        v-bind:class="{                
          'active': page === paginationOptions.page            
        }">
      <div class="content">{{page}}</div>
      <span v-if="page === paginationOptions.page"                   
            style="display: none">(current)</span>
    </li>
    <li v-if="totalPages > 3 && paginationOptions.page + 2 <= totalPages"             
        v-on:click="paginationOptions.page = (paginationOptions.page + 3 <= totalPages) ? paginationOptions.page + 3 : totalPages"             
        aria-label="Jump three pages forward"             
        title="Jump three pages forward">
      <div class="content">…</div>
    </li>
    <li v-on:click="paginationOptions.page = totalPages"             
        aria-label="Go to the last page"             
        title="Go to the last page"            
        v-bind:class="{                
          'disabled': paginationOptions.page === totalPages            
        }">
      <div class="content">&rarr;</div>
    </li>
  </ol>
</div>

JS

new Vue({ 
  el: "#app", 
  data: { 
    paginationOptions: { 
      page: 2, 
      total: 55, 
      pageSize: 10
    }
  }, 
  computed: { 
    totalPages() {
      return Math.ceil(this.paginationOptions.total / this.paginationOptions.pageSize);
    }, 
    pages: function () {
      const returnArray = [];
      if(this.paginationOptions.page === 1) {
        for(i = 1, count = 0; i <= this.totalPages && count < 3; i++, count++){ 
          returnArray.push(i)
        }
      } else {
        if(this.paginationOptions.page === this.totalPages) {
          for(let i = this.totalPages, count = 0; i >= 1 && count < 3; i--, count++) { 
            returnArray.push(i)
          } 
          returnArray.reverse();
        } else { 
          returnArray.push(this.paginationOptions.page);
          if(this.paginationOptions.page < this.totalPages) { 
            returnArray.push(this.paginationOptions.page + 1)
          }
          if(this.paginationOptions.page >= 1){ 
            returnArray.unshift(this.paginationOptions.page - 1)
          }
        }
      }
      return returnArray;
    }
  }
});

SCSS

#app{ 
  margin: 1em;
}
ol { 
  display: flex; 
  align-items: center; 
  justify-content: flex-end; 
  margin: 0; 
  padding: 0;
  list-style-type: none; 
  width: 100%; 
  text-align: right; 
  li{ 
    display: inline-block; 
    &.disabled { 
      cursor: not-allowed; 
    } 
    .content { 
      text-decoration: none; 
      font-weight: bold; 
      background-color: #fff;
      color: #7f8c8d; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      width: 40px; 
      height: 40px; 
      margin: 0 3px; 
      border: 1px solid #e5e5e5; 
    } 
    &.active { 
      .content { 
        border-color: #2c3e50; 
        background-color: #2c3e50;
        color: #fff; 
        text-decoration: none; 
      } 
    } 
  }
}