Creating pagination
Creating pagination, initially, seems quite simple – as you only need to return a fixed number of products. However, if we wish to make our pagination interactive and reactive to the product list – it needs to be a bit more advanced. We need to build our pagination to be able to handle different lengths of products – in the case where our product list has been filtered into fewer products.
Calculating the values
The arithmetic behind creating a pagination component and displaying the correct products relies on four main variables:
- Items per page: This is usually set by the user; however, we'll use a fixed number of 12, to begin with
- Total items: This is the total number of products to display
- Number of pages: This can be calculated by dividing the number of products by the items per page
- Current page number: This, combined with the others, will allow us to return exactly which products we need
From these numbers, we can calculate everything needed for our pagination. This includes...
