Позвольте пользователю решить, сколько элементов на странице

Контекст

У нас есть таблица со 155 элементами,

Я хочу создать это поле на каждой странице,

'Отображение результата [от начального элемента - до элемента с номером X] из itemTotal' введите здесь описание изображения

StartingItem = 1 -----> на странице 1

ItemNumberX = пользователь может видеть следующие 25 элементов

это фактический фильтр страниц

введите здесь описание изображения

Это данные, которые у меня есть на самом деле

  const minShowData = currentPage === 1 ? 1 : (currentPage - 1) * itemsPerPage;
  const itemsAtCurrentPage = currentPage * itemsPerPage;
  const maxShowData =
    totalCount > itemsAtCurrentPage ? itemsAtCurrentPage : totalCount;
  const showElement = [5, 10, 20, 25, 50]; ----> this is the old pagination

у нас есть данные itemsPerPage через редюсер, и мы представляем, сколько элементов мы увидим на странице, во втором поле risultati per pagina установлено значение 2.

так выглядит переменная showElement

введите здесь описание изображения

есть способ с этими данными сделать фильтр вроде

Showing results [1-25, 26-50, 51-75 ...] of 155 ?

Мне не нужен код для создания компонента, просто поймите, есть ли способ построить вычисление внутри поля.


reactjs computation
person Legeo    schedule 26.09.2019    source источник
comment
Итак, вы получаете количество шагов от пользователя или вы заранее определяете количество шагов? Если вы показываете 20-30 элементов, вы используете цикл for totalitems/numberOfItems, поэтому 101/20 = 5, поэтому первый равен (1-1)*(20)+1 и 1*(20), второй равно (2-1)*(20)+1 и 2*20 и т. д. Просто не забудьте выполнить модульную проверку в конце после цикла for, поэтому 101%20 = 1, будет одна дополнительная страница с этим последний оставшийся предмет.   -  person Marco    schedule 26.09.2019
comment
Просто для ясности: 1-й случай) у меня 155 элементов, пользователь каждый раз будет видеть 25 элементов на странице, и он может выбрать индекс элементов для просмотра. Пример: 1-25, 26-50, 51-75 и т.д. 2-й случай) I-ve 30 элементов, элементы могут видеть элементы 1-25, 26-30. я думаю, это предопределение количества шагов. Пользователь может видеть только элементы в диапазоне 25.   -  person Legeo    schedule 26.09.2019
comment
Итак, это случай повторения правильного вывода, чтобы сказать, на какой странице вы находитесь с точки зрения элементов?   -  person Marco    schedule 26.09.2019
comment
Да, именно этот случай. Пример) если я хочу увидеть элементы 26-50 (если они существуют), я буду на второй странице, и мне нужно показать 26-50 в поле. Если я нажму на 51-75, я окажусь на третьей странице, и мне нужно показать 51-75 в поле.   -  person Legeo    schedule 26.09.2019

Ответы (1)


arrow_upward
1
arrow_downward

так что у вас есть const itemsPerPage = 25; //this you can set to be user alterable if you want const itemsTotal = 155; //this you'd use a function to go get the number of items.

const pageIncrements[];

for (let pageNumber = 1; pageNumber <= itemsTotal / itemsPerPage; pageNumber++) { pageIncrements += [((pageNumber - 1) * (itemsPerPage) + 1)) + " - " + (pageNumber * itemsPerPage)] } if (itemsTotal % itemsPerPage > 0) { pageIncrements += [(itemsTotal - (itemsTotal % itemsPerPage)) + " - " + itemsTotal] } Извините, я не работал с синтаксисом реакции, но логика должна быть правильной.

person Marco    schedule 26.09.2019