Алгоритм реализации пагинации на стороне клиента ( без повторных запросов к API )?

Question

[bzotsss]

Всем привет . Допустим у меня есть массив

[
{Id:1,title:'hi'},
{Id:2,title:'hi'},
{Id:3,title:'hi'},
... И ещё сто объектов 
]

Как при помощи данного массива реализовать полноценную пагинацию без повторных запросов к API? Массив загружается фетчем один раз .
Допустим мы будем выводить по 10 объектов на страницу . Как задать общее количество кнопок для пагинации я понимаю ( array.length / pageCountPerPage )
Вопрос стоит в следующем :
1) Как по клику например на вторую кнопку отобразить последующие 20 объектов на странице
2) Как правильно брать по 20 объектов из массива ? У меня был вариант

//pageCount - кнопка с цифрой которую мы получили* на 20 - так я получаю до скольки записей нужно "обрезать" массив
arr.slice(0,pageCount)

Мой логический вариант который не совсем рабочий :
1)например юзер кликает на кнопку со значением 3
2) массив обрезается arr.slice(0,60)
3) получаем массив от 0 го элемента до 60 , всё ок но что делать с 0?
Можно без кода , а только логику реализации . Желательно на реакт , можно с использованием Redux
Спасибо!

Comments

[WbICHA]

1)например юзер кликает на кнопку со значением 3
2) массив обрезается arr.slice(0,60)
3) получаем массив от 0 го элемента до 60 , всё ок но что делать с 0?

Так обрезай от 40 до 60.)

Как получить 40? А как ты получил 60?

[bzotsss]

WbICHA, 60 получал так : значение кнопки * 20 :) а как получить 40 вот в этом и проблема ...

[WbICHA]

bzotsss, и даже никаких идей? Ну там математика за 3ий класс, где сложение, вычитание.

[bzotsss]

WbICHA, записать наше 60 в переменную -> наша переменная - 20 . Получется так ?:)

[WbICHA]

bzotsss, вполне. Тольк я бы предпочёл (x - 1) * y, а не x * y - y.

[bzotsss]

WbICHA, понял