How are you filtering the collection?
You can bind your pagination logic to a filtered collection.
Example with a sample products database with name and price:
-
Create a variable
filter_price:
-
Create a dynamic collection from Xano with prices filtered by price with a value bound to
filter_price(you need to access the variable withvariables['variable uuid'])
-
Create a range input with initial value as
filter_priceand a workflow that changefilter_priceon change
-
Create a
PAGEvariable default value 0 (the current page iszero-indexed)
-
Add a columns element with items calculated from the collection (in this example we show lines of 3 items)
-
Add a “more” button with a workflow that increases
PAGEby 1 on click
-
Refetch the collection on range input change
-
Reset
PAGEon range input change
Of course you can also have a collection filtered and paginated on the backend or you can fetch the full unfiltered collection and you filter it on the frontend, just bind the columns item to the filtered result.
“load more” on scroll needs custom code. Ideally it should trigger a workflow action when the end of the page, or a specific element, enters the viewport so you can execute the actions needed for your pagination.
Hope this helps with