Pagination in React Web
Application Type
Reactive
Service Studio Version
11.14.14 (Build 59923)

Hi All,

I would like to know more about the Pagination the documentation provided is limited to DB. React - Pagination


My concern is initially the user inputs data and display to a table and its stored on a local structure.


Now while the user still not hitting the save button I would like to ask help how to make the pagination work.


E.g. Table will display 5 rows per page

Name of Local Variable MyUserList 

Structure - (List of Users) Data Type

The Attributes below

Users.Name

Users.Id

Users.Email


how do I refresh the table to display the 6th to 10th users using the pagination


Hi @d cabral,

Your table not refreshing on pagination because you have to use two different local list variables-

one to store whole record list and second one to store records that you want to display on table.

I have modified them oml you shared. PFB. 

Now its working fine as per your changes.

Demo_012.oml

For showing the next 5 records ( as you said from 6 to 10) you should use "Pagination" widget available in reactive web. Then bind this widget with your data source (MyUserList). 

Can refer example on below URL : https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Mobile_and_Reactive_Patterns/Navigation/Pagination

If still face any difficulty to implement this, please let me know.

Regards

Does it mean that pagination will not work for local list of datas? any alternative pagination that can easily interact with a table that will not interact to the actual DB/table

Hi ,

Can you please briefly explain 

Now while the user still not hitting the save button I would like to ask help how to make the pagination work.

 for proper solution .

Thanks,

Jitendra


provided further explanation @ Narendra Bhangale  reply to my post.

Hello @d cabral,

As per your requirements I have created one demo application for your reference.

oml file is also attached PFB.

If my solution is not fit as per your requirements you can elaborate your problem statement so I will modify solution as per that.


Regards,

Narendra Bhangale.

Demo_012.oml

I have updated the oml file you shared.

the form will not communicate to the actual table because it is a child block of a big page. to make it simple it will have a local variable that holds the list. now the table will be modified by the user by adding or editing or deleting the record.

as you can see in the red circle the 2nd page was click but the actual table is not showing the next 11 to 14 items


you may see the .oml attach 


FYI the child web block (my concern) that contains the table will not interact to the DB as the parent page will only give it the structure list. 

Demo_012.oml

Hi @d cabral,

Your table not refreshing on pagination because you have to use two different local list variables-

one to store whole record list and second one to store records that you want to display on table.

I have modified them oml you shared. PFB. 

Now its working fine as per your changes.

Demo_012.oml

This is what I want to output for, therefore I need to transfer the list of data to another local variable for displaying purposes.

Thank you very much guys

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.