[CONCEPTION] Pagination Index

[LePhenix47]

Pagination Index:

Composition:

They're all a <button type="button"> with the value of the index or text to go to the previous or next entry of the table wrapped inside the second column of the<tfoot>

Features:

This element should:

• Use the formula: [total entries] ÷ [shown entries] to compute the indexes need for the <tbody>
• Use the formula: ([table index] - 1) × [shown entries] to get the start of the index
• Use the formula: ([table index] - 1) × [shown entries] + [shown entries] - 1 to get the end of the index
• If the end of the index is superior to the length of the data, the end of the the index equals to its length - 1

ex:

Imagine we have some data with 1 000 entries (data.length === 1 000), the user wants to see 50 entries
To compute all the indexes for the table we do:

1000 ÷ 50 = 20

Now imagine the user goes to the table index: 15
The body must start from:
(15 - 1) × 50 = 700

To:
(15 - 1) × 50 + 50  - 1 = 749

Is 749> 1000? → False, do not set the end index to its length - 1

It should now show in the <tbody>, the data starting at index 700 (data[700]) and finishing at index 749 (data[749])

[LePhenix47]

Demo:

https://user-images.githubusercontent.com/78600723/217267270-137dc610-a290-401a-b016-980746485f0c.mp4

[LePhenix47]

Steps to integrate the feature (PART 1/3):

• Give the shown entries to its child component from the <select> element of another child component
• Give also the total value of the total amount of pagination indexes to its child component
• Get the value of the pagination index selected from the child component (View how here)
• Get the starting index and ending index
• Check if the ending index has a greater value than the total amount of data, if it is then assign the ending index to data.length - 1
• Reset the dataToShow array (empty it)
• Fill it in with the value of the starting index and the ending index
• Update the UI

ex: 
The user chose to go the pagination index n°5 in a table with an amount of shown entries set to 25 out of 
the total amount of entries equal to 1 000:

→ PaginationIndex = 5

→ Shown entries = 25

→ TotalEntries = 1 000

→ TotalPaginationIndexes = [TotalEntries] ÷ [ShownEntries] = 1 000 ÷ 25 = 40

→ StartIndex = ([PaginationIndex] - 1) × [ShownEntries] = 4 × 25 = 100

→ EndIndex = [StartIndex] + [ShownEntries] - 1 = 100 + 25 - 1 = 124

→ Is 124 > [TotalEntries] - 1? False

→ Reset the dataToShow array (empty it)

→ Add the values starting from the StartIndex and ending at the end index

→ Update the UI

Shares some steps with #1

[LePhenix47]

Shared steps with #1 :

• Get the value of the ShowEntries <select> element from the <ShowEntries/> component

• Get the PaginationIndex from the <PaginationIndex/> component

• Compute the StartIndex and EndIndex value with these formulas:

• 1. StartIndex = ([PaginationIndex] - 1) × [ShownEntries]
• 2. EndIndex = [StartIndex] + [ShownEntries] - 1

• If EndIndex > [TotalEntries] - 1, set EndIndex = [TotalEntries] - 1

• Reset the dataToShow array → dataToShow = []

• Fill the array with new values starting from StartIndex and ending to EndIndex

• Format the array like this: [[…], […], […] …]

  Explanation:
  An array inside the array of array represents a table row element: <tr>
  The values inside that array represent a column for the table row: <td>

• Update the UI of the <DataTable/> component

[LePhenix47]

Steps to integrate the feature (PART 2/3):

1)

2)

3)

In order to create the pagination effect on the foot of the table:

• Get the PaginationIndex from the <PaginationIndex /> component
• If the PaginationIndex = 1 → Disable the Previous button
• If the PaginationIndex = EndOfPagination → Disable the Next button
• If the PaginationIndex + 1 <= 4 → Show the pagination like in n°1
• If the PaginationIndex + 1 > 4 AND PaginationIndex + 1 < EndOfPagination - 4 → Show the pagination like in n°2
• If the PaginationIndex+ 4 >= EndOfPagination → Show the pagination like in n°3

[LePhenix47]

When the amount of pagination indexes <= 7:

• Example with 2 pagination indexes → 2 buttons:

• Example with only 5 pagination indexes → 5 buttons:

• Example when the pagination index = 7, still no fancy styling

[LePhenix47]

Steps to integrate the feature (3/3):

For the buttons, we need to make a condition with the TotalPaginationIndex (or TPI for short):

• If the TPI <= 7, show all the buttons

• If not, then that means that there will need to add some additional conditions with the PaginationIndex (PI):

• 1) If the PI < 5 → Show: 1 2 3 4 5 ... [TPI]

• 2) If the PI >= 5 && PI <= TPI - 4 → Show: 1 ... [PI - 1] [PI] [PI + 1] ... [TPI]

• 3) If the PI > TPI - 4 → Show 1 ... [TPI - 4] [TPI - 3] [TPI - 2] [TPI - 1] [TPI]

[LePhenix47]

Shared button steps:

• Set the pagination index equal to the value of the button
• Reset all the buttons styling by removing all the “active” class on the row of buttons
• Add the “active” class on the button clicked

[LePhenix47]

Idea

For the PaginationIndex with a TotalPaginationIndex over 7, if its value is in between (case 2), then it should be working like a counter:

[LePhenix47]

Each case should be rendered inside a component

Case 1)

 <FirstRow TotalPagination={TPI} PaginationIndex={PI} />

Case 2)

<MiddleRow TPI={TPI} PI={PI} />

Case 3)

<LastRow TPI={TPI} PI={PI} />

[LePhenix47]

Recall of how to show the table:

1) We get the start and end index: SI = (PI - 1) × SE EI = SI + SE 2) Reset the dataToShow DTS = []

3) If the array has to be sorted → sort it with sortArrayOfObjects()

4) Fill in the new values for the dataToShow array starting at SI and finishing at EI

for(let i = [SI]; i < [EI]; i++){
  const item = data[i];
  DTS.push(item);
}

5) Re-render the values inside the component

setValues( getArrayObjectValues(DTS) )

[LePhenix47]

⚠ Issue ⚠

There's currently an issue with the table, let's say we have a table of 429 entries and:

• Shown entries: 10
• Pagination index: 5
• Total pagination indexes: 43

And that we wanted to expand the amount of entries shown to 25:

• Shown entries; 25
• Total pagination indexes: 18 (429/25 rounded to the ceiling)
• Pagination index: 5 ⚠

With the current implementation, the pagination index does not change, and so we end up at the pagination index number 5 instead of number 2

The formula to fix it is this:

[Current PI] = [Previous PI] × [New TPI] ÷ [Old TPI]

ex: [Current PI] = 5 × 18 ÷ 43 = 2

[LePhenix47]

💡 Idea how to implement it

An idea as to how to implement it would be to store the TPI inside an array with a state If that array exceeds a length of 2 → remove its first element

It would be called before initialisazing the starting and ending indexes ex:

const [historyPaginationsArray, setHistoryPaginationsArray] = useState([])

//We're going to use the spread operator and the normal syntax
setHistoryPaginationsArray([... historyPaginationsArray, PI])

if(historyPaginationsArray.length > 2){
  //We are going to use the function notation to remove the first element

  setHistoryPaginationsArray( ( hTPI ) => {

      //We remove the first item only
      return hTPI = hTPI.shift()
   }
  )

setStartAndEndIndex();
//...
}

And then get the old TPI using the first element of the state and the new TPI as the new one:

const oldTPI = historyPaginationsArray[0];
const newTPI = historyPaginationsArray[1];

[LePhenix47]

The idea has a huge flaw → can't update the pagination index because it's a state

[LePhenix47]

Update on how the [PI] works:

1. Get the [New PI]
2. Set the [SI] and [EI] with the [New PI]
3. Check if the [New PI] underflows or overflows
4. Give the indexes to the <EntriesIndex /> component
5. Reset the [DTS] to an empty array
6. Fill in the values of [data] in [DTS]
7. Update the UI