Building an E-Commerce Store - Browsing Products Chapter 10To continue our semantic approach to listing our products, we should update the start
position of our ordered list when not on page one. This can be done using the HTML
attribute of start – this allows you to specify with which number you should start an
ordered list.
Use the pagination.range.from variable to set the starting point of our ordered list –
remembering to add 1 as on the first page it will be 0 :
template: `<div v-if="products">
<ol :start="pagination.range.from + 1">
<li v-for="product in paginate(products)" v-if="product">
<h3>{{ product.title }}</h3>
</li>
</ol>
</div>`When incrementing the page numbers in the code now, you will notice the ordered list
starts at the appropriate place for each page.
Creating paginating buttons
Updating the page number via the code isn't user-friendly – so we should add some pages
to increment and decrement the page number variable. To do this, we'll create a function
that changes the currentPage variable to its value. This allows us to use it for both
the Next page and Previous page buttons, plus a numbered page list if desired.
Begin by creating two buttons within your pagination container. We want to disable
these buttons if we are at the extremities of the navigations – for example, you don't want to
be able to go below 1 when going back, and past the maximum number of pages when
going forward. We can do this by setting the disabled attribute on the button – like we
did on the product detail page and comparing the current page against these limits.
Add a disabled attribute and, on the Previous page, the button checks if the current page
is one. On the Next page button, compare it to the totalPages value of our pagination
method. The code for implementing the previously mentioned attributes is shown here:
<button :disabled="currentPage == 1">Previous page</button>
<button :disabled="currentPage == pagination.totalPages">Next page</button>