Paging Problem

"We've got all this data, and no way to split it up" - Sir Isaac Newton

Motivation

When displaying data in a grid (a grid is just a table for all intents and purposes), it is a good idea to break it into smaller "pages" when the number of rows become large. This means that, even if the total number of rows in a grid is... say, 1,000... we only show... say, 50... rows at a time. Showing smaller sections reduces resource usage by the UI. Additionally, if we are working with a REST api, we use less network bandwidth, and we reduce the time for the data access to be performed

One of the components involved in paging are the buttons at the bottom of the grid that allow a user to choose which page they would like to navigate. Typically, these "pagination buttons" provide a way for a user to navigate to the "previous" page, the "next" page, and directly to a few local pages (sometimes there are "first", "last", and "jump n pages" buttons, but we are not worried about that now). There is also typically some indicator of the current page that is being shown

The example below shows what this may look like in practice

Problem

Write a function that returns a list of objects that model the state of pagination buttons for a data set with n total entries, a page size of p, and a current page of c

Requirements

1. The "prev" and "next" buttons must always be shown
2. If the current page is 1, the "prev" button is disabled
3. If the current page is n, the "next" button is disabled
4. Ideally, we want to show 5 number buttons
5. The current page should be centered when possible
6. If the current page cannot be centered, it is okay if it is offset

Visual Examples

Standard (note: an underlined number denotes the "current page")

"prev" disabled

"next" disabled

edge case (current page not centered)

Hints

Hint #1: It may be helpful to think of the pagination button objects with these attributes

const paginationButton = {
  value: ...,
  isDisabled: ...,
  isCurrentPage: ...
}

Hint #2: Here's a function signature that may help get you started

// n: total number of rows in data set
// p: page size
// c: current page
function getPaginationButtons(n, p, c) {
  // code goes here
}

Hint #3: Knowing the total number of pages would probably be useful

Follow Up

What happens if you only have enough data to make 3 pages, when we need 5?

What happens if there is no data, or only 1 page?

Notes

You don't have to make a function. You could use an object oriented approach

You don't have to use javascript