Как правильно посчитать количество книг?

Question

[ivan_kholodov]

Всем привет! Вопрос такой: Есть страница на которой отображаются книги (каталог), они имеют нумерация в столбце

1.
2.
3.
4.

внизу есть переключалка страницы.
Я знаю что всего 8 книг, но отображаются они по 4.
Дело в том, что при переключении на вторую страницу - нумерация опять происходит с 1-й страницы.

Массив с книгами выглядит так:

books = [{id: 10, name: 'Первая'}, {id: 120, name: 'Вторая'}, {id: 100, name: 'Третья'}, {id: 13, name: 'Четвертая'}]

массив приходит по 4 книги, но есть свойство, которое отображает общее количество книг totalBooks
totalBooks: 8

Сейчас нумерация выставлена на индекс + 1 из-за этого работает неккоректно.

return data.map((book, index) => ({
      fields: {
        number: index + 1,

Вопрос: Как выставить правильную нумерацию исходя из того, что знаешь общее количество книг?
p.s id воспользоваться нельзя, так как они не начинаются по порядку и формируются в зависимости какой каталог книг был запрошен.

Comments

[Сергей delphinpro]

PageNo * PageCount + Index

[Kostya10295]

Ну как минимум нужно знать номер текущей страницы
index = (page - 1) * 4 + index

[ivan_kholodov]

Kostya10295, Спасибо! Заработало!
p.s не могу отметить решением, напишите не в комменте

[ivan_kholodov]

Сергей delphinpro, не известно PageCount

[Сергей delphinpro]

ivan_kholodov, Имел ввиду PerPage = 4

[ivan_kholodov]

Сергей delphinpro, почему-то у меня такая конструкция не работает

[ivan_kholodov]

Kostya10295, Данный вами способ не особо корректно работает. в таком сценарии То есть работает, но при сценарии таком работать не будет: На первую страницу пришло 7 книг (не 4), на вторую страницу пришло 4 книги. Отображение будет с 1 по 7 (на 1-й странице), а на второй будет с 4 по 8

[Сергей delphinpro]

ivan_kholodov, когда делают постраничную навигацию, то обычно количество элементов на одной странице — величина постоянная. Поэтому опираются на номер страницы и количество на странице.
Почему у вас такой рандом?

[Сергей delphinpro]

почему-то у меня такая конструкция не работает

ненавижу такие ответы. не работает и всё тут. Ну ты хоть объясни поему у тебя вдруг математика перестала работать? У всех работает с доисторических времен, а у тебя вдруг нет.

[ivan_kholodov]

Сергей delphinpro, Если известно количество книг и номер страницы, то есть вот так:
PageNo * books.length + index
то вывод будет такой:

первая страница:
10
11
12
13
вторая страница:
20
21
22
23

может я вас не понял?

[Сергей delphinpro]

ivan_kholodov, не общее количество книг, а количество книг на одной странице. Считаем, что на всех страницах у нас выводится одинаковое и постоянное количество элементов, кроме, разумеется последней.

[Сергей delphinpro]

Ну и совершенно очевидно, что страницы нужно считать с нуля.

[Сергей delphinpro]

ivan_kholodov,

[ivan_kholodov]

Сергей delphinpro, Спасибо! Теперь я всё понял!

Answer 1

[WebEagle]

1. Вариант использовать state, и реализовать дозагрузку книг в текущий список
2. Если реализуете пагинацию - при расчете учитывайте на какой странице находитесь

let currentPage = 0; // начинать лучше с нуля
let booksOnPage = 4;

использование:

return data.map((book, index) => ({
      fields: {
        number: (currentPage * booksOnPage) +index + 1,

Comments

[ivan_kholodov]

Добрый день! Спасибо за подсказку, но дело в том, что текущая страница приходит в компоненту и начинается с 1. То есть если использовать вот так:
(currentPage * booksOnPage) +index + 1
то получается нумерация будет начинаться с 5 или 6 (если убрать + 1 к индексу)

Есть ещё такая проблема: Это не будет работать корректно если к примеру на первую страницу придет 7 книг, тогда нумерация будет от 1 до 7 (если переписать условие, вот так: (page - 1) * books.length + (index + 1)), а на вторую страницу придет к примеру 4 книги, тогда на второй странице будет нумерация начинаться с 4-х