Search code examples
reactjscomputation

Let the user decide how many items in a page

Context

We have a table with 155 elements,

I want to build this field on every pages,

'Showing result [from starting item - to item number X ] of itemTotal' enter image description here

StartingItem = 1 -----> at page 1

ItemNumberX = the user can see the next 25 items

this is the actual pages filter

enter image description here

These are data that I actually have 

  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

we have the data itemsPerPage through a reducer, and represent how many items we will see in page, in the second field risultati per pagina is set to 2.

this is how the variable showElement appear

enter image description here

there is a way with these data to made a filter like

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

I don't need the code to build the component, just understand if there is a way to build the computation inside the field

Solution

  • so you have 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] } Sorry, haven't worked with react syntax, but the logic should be right.