Pagination

in experience, lists use infinite scrolling by default when the user scrolls to the bottom of the list, more data is automatically loaded until the end of the dataset is reached by default each load adds 24 items this value can be overridden using the batch size field in the data source configuration if you want to disable infinite scrolling , you must define a limit in the data source once a limit is set, the list will not auto load more items when scrolling this document covers default infinite scrolling behavior manual pagination (next/previous buttons, no infinite scrolling) 1 infinite scrolling (default behavior) behavior data loads automatically when scrolling to the bottom each batch loads 24 elements by default continues until all data is loaded configuration in the list component → datasource settings ✅ data source enabled 🔢 batch size (optional) override default 24 items per load ❌ do not set a limit → infinite scrolling remains active { "content" { "tag" "div", "type" "html", "content" "\[]" }, "datasource" { "type" "content", "batchsize" 24 }, "type" "list" } 2\ manual pagination (no infinite scrolling) ( pxp 5 1 0 ) goal display a fixed number of items (e g 10) no automatic loading on scroll navigation only via next and previous buttons concept pagination is controlled using a limit on the datasource a cursor/offset stored in context buttons that modify the offset via navigation params required components to implement manual pagination, configure 3 components list component previous button next button 2 1 list component configuration step 1 enable data source in list component → datasource ✅ enable datasource choose the datasource type as needed step 2 limit (page size) set limit = 10 (or any page size you want) this ensures only 10 elements are shown infinite scrolling is disabled step 3 cursor / offset add cursor field value $context offset condition $context offset is set this allows the data source to know from which position should it load data 💡 you may name the parameter something else (e g pageoffset), but then all references must use $context pageoffset { "content" { "tag" "div", "type" "html", "content" "$context content name" }, "datasource" { "type" "content", "limit" 10, "fetchoptions" { "totalcount" true }, "contextkey" "contents", "cursor" { "value" "$context offset", "condition" { "value" "$context offset", "operation" "set" } } }, "type" "list" } 2 2 "previous" button configuration visibility condition button is shown only when $context offset > 0 this prevents showing "previous" on the first page tap action set tap action → navigation path current path params key offset value $functions add($context offset, 10) this decreases offset by page size loads previous set of elements { "tag" "div", "type" "html", "content" "prev page", "tap" { "type" "navigate", "params" { "offset" "$functions add($context offset, 10)" } }, "condition" { "comparevalue" "$functions add($context offset, 0)", "value" "0", "negated" true } } 2 3 next button configuration visibility condition button is shown only when $context contents hasnextpage == true where contents = datasource result hasnextpage indicates more data is available tap action set tap action → navigation path current path params key offset value $functions add($context offset, 10) this increases offset by page size loads next set of elements { "tag" "div", "type" "html", "content" "next page", "tap" { "type" "navigate", "params" { "offset" "$functions add($context offset, 10)" } }, "condition" { "operation" "equals", "comparevalue" "true", "value" "$context contents hasnextpage" } } 2 4 functions add add and tojson functions to custom server js window $functions = { tojson (val) => json stringify(val, null, 2), add (val, plus) => parseint(val ?? '0') + plus } summary feature infinite scrolling manual pagination auto load on scroll ✅ yes ❌ no uses limit ❌ no ✅ yes uses offset/cursor ❌ no ✅ yes requires buttons ❌ no ✅ next / prev page size control batch size limit