...

/

Adding Support for Pagination

Adding Support for Pagination

Learn how to implement a generic pagination algorithm that we can reuse with any array.

Even though we can now delete students from the system, it’s unlikely that we will end up with a small set of data in the long run. When working with hundreds of entries, it quickly becomes cumbersome to manage the whole dataset on a single page. This also has negative performance implications because rendering hundreds of rows becomes labor intensive for the computer. This is why we’re going to focus on adding a pagination functionality for the application.


How pagination works

Pagination works by splitting up the entire dataset into smaller sections, which are often called array chunks. We can then use the indexes of these chunks to refer to certain pages and render only a subset of data to the page.

Press + to interact
Visualization of pagination
Visualization of pagination

For this, we’re going to need a helper function, which we can use to break down our dataset into smaller chunks. To achieve pagination, we’re going to use the following paginate function, which can be used on any array:

Console
Implement the paginate function

As we can see from the example above, we get ...