infinite scrolling with limited records from Database

I have created infinite scroll on TableRecords. Here I have used variable MaxCount = 20 in Preparation.

On each scroll MaxCount += 20.

And then, Used this var on Max. Records property of AdvanceSQL from which I'm fetching data. But SQL is returning all the records.

Ex: On load 20, On first scroll (20+20), third (40+20)...

But, I need data as per current pages, like only next 20 records each time, and then append those 20 records to the list and show that in the table bottom.

Rank: #328

If I understood your question correctly, I'd say you want to fetch the data with an offset. Check below link for more information on that:


Rank: #500

Correct Sam, But again you need to add those records to prev list variable, then Refresh Table.

But, If records goes to thousands it will take more time to load.

I need something, Which will append data directly to end of the table. 

Rank: #328

Ah I see. I just found an infinite scroll component in the forge. Did not take a look at it yet, but maybe this could help you?

Otherwise I wouldn't know how to help you.

Rank: #500

Thanks for the help Sam, 

But here also they are fetching all the data in next scroll.

Rank: #500

Can anyone please give me some solution for this!

Rank: #240

Hi Amol Tupe,

There is a component similar to your requirement.

Just go through the link https://www.outsystems.com/forge/component-overview/4781/demo-optimized-advance-sql-with-paging

Hope this will Help you.



Rank: #500

Koushik, I got solution to fetch limited records,

But, now I want to append those records to Table, without refreshing complete data. Just append new records at bottom.

Because, It is regenerating complete HTML structure each time.

Rank: #240

Amol create a variable of the List data type.

On Preparation after fetching the data assign the data to the variable, and bind the variable to the table records widget.

OnNotify action of the List Navigation Widget re-execute the query and use the List Append All server action assign the data to the  List variable, refresh the table record.

Hope this will helps you.



Rank: #500

I don't want to refresh complete table records, There will be thousands of data in the table, If complete table refreshed, then it will take time to re-generate complete HTML.

So, I just want to append newly fetched data at the end of table. 

Hello Amol 

I not totally sure if I understand what you want. Can o please give one example...

As I could understand the Koushik proposal can be a solution. You can add new rows to the list variable and delete (before or after) the first records (in the list), keeping the list small... if it is what you want..!


Rank: #240

Amol, After appending the values to the list, in web you have to perform ajax refresh on the table record widget to render the updated list.If you are not performing ajax refresh then the updated list of values are not rendered on the screen.


Rank: #500

All is good, I'm refreshing it.

But if 1000 records are loaded after many scroll, then DOM will take time to render 1000 records, 

In next call, It will load more 20 records, Then it will again refresh for 1020 records.
I don't want that, I want to add only those new 20 records, Don't want to touch old records. 

Rank: #1590

If it is the requirement, Please try with reactive web. table refresh is not required there. and the data append is real time as like you asked above.