Simple reuseable pagination element

mitchbaylis · 2025-01-24T03:25:35.957Z

for a long time I used to create a pagination pager for every repeating group… it was time consuming and annoying

when bubble upgraded their reuseable elements to allow parameters to be passed into the reuseable I discovered a way to build a reuseable pager element - here’s how it works:

create reuseable for the pager with input parameters for current page, total items, items per page
add a state to the reuseable for “selected page”
add a workflow for previous, next or page selection (can show page numbers in dropdown or repeating group) - on page select run workflow to update the page selected state
reset the state using a scheduled workflow half a second after it has been set (this gives enough time for it to be registered and acted upon)
add the reuseable pager for each repeating group
map the parameters (note I do the # pages calculation in the pager using total items/items per page)
add a workflow for “when condition is true” set it to when pagers “selected page” is not empty
then use go to page in repeating group to change the page based on the selection
the scheduled workflow clears the selected page after half a second allowing the “when condition is true” to retrigger

the pager element is quite simple design it has:

previous and next buttons
either a “1 of 20” text, or a dropdown, or a repeating group to represent the pages

now I can add a pager to any repeating group in a few seconds - just map 3 inputs and add a when condition is true event.

and since each pager is unique the condition is true event runs per pager which allows you to have as many pagers on the same page as you need - they will all function separately

having a reuseable element for the pager also makes it very easy to update all pagination elements in the app. for instance you might start with a simple “1 of 20” for the “current page 1 of total 20 pages” then later on decide you want to change it to a dropdown or input so the user can jump to pages - with a reuseable making that change is then reflected in all places it is used in the app.

boston85719 · 2025-01-24T04:44:18.319Z

since I’m in my 40s I was reading this as ‘what the heck is a pager’ some sort of device that a doctor would have used in the 1990s…then I realized as I read the details it is about pagination…thanks for the tip.

mitchbaylis · 2025-01-24T04:51:21.611Z

whoops, I’ll relabel it a bit better