Bootstrap 5 Paging Generator
Generate paging controls quickly and wire them to your data flow for smooth list navigation.
Paging Generator
Section titled “Paging Generator”The Bootstrap 5 Paging Generator scaffolds Bootstrap pagination UI and binds it to a data source that supports paging.
What it generates
Section titled “What it generates”Start by looking at what the paging generator actually builds before you think about customization. This output shows the navigation structure, active state, and previous-next behavior Wappler scaffolds for you, which makes the later property choices easier to understand and adjust with confidence.
When to use it
Section titled “When to use it”Use this when your data source is paged (for example: a database query with paging, or an API that returns page + total information).
Open the generator
Section titled “Open the generator”Open the Components picker, select the Generators category, then choose Bootstrap 5 Paging Generator.
Components picker opens
Section titled “Components picker opens”The Insert Child command opens the Components picker. This step matters because Components picker opens is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Components picker
Section titled “Components picker”Use categories to find generators quickly. This step matters because Components picker is part of Components Popup Root, and understanding that context makes the next action easier to repeat in your own project.
Generators category selected
Section titled “Generators category selected”The Generators category is now selected. This step matters because Generators category selected is part of Components Popup Anchor Right, and understanding that context makes the next action easier to repeat in your own project.
Paging Generator selected
Section titled “Paging Generator selected”Bootstrap 5 Paging Generator is now selected and its dialog opens. This step matters because Paging Generator selected is part of Components Popup Root, and understanding that context makes the next action easier to repeat in your own project.
Generator dialog
Section titled “Generator dialog”The generator opens in a popup dialog.
Paging source
Section titled “Paging source”Choose where paging information comes from.
Paging Source
Section titled “Paging Source”The paging source determines whether paging comes from a paged Server Action, a Data View, or a Flow Action.
Data Source / Data View
Section titled “Data Source / Data View”The data source field links paging to the provider that exposes paging state (current offset/page, total records, etc.).
Layout
Section titled “Layout”Configure how the pagination looks.
Paging Size
Section titled “Paging Size”The size variant controls the Bootstrap paging size (default, large, or small). This step matters because Paging Size is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Pagingsize Input, and understanding that context makes the next action easier to repeat in your own project.
Outer / Adjacent links
Section titled “Outer / Adjacent links”Outer Links and Adjacent Links control how many page links are shown. This step matters because Outer / Adjacent links is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Outerlinks Input, and understanding that context makes the next action easier to repeat in your own project.
Controls
Section titled “Controls”Enable or disable first/prev/next/last controls and configure their labels.
Previous / Next
Section titled “Previous / Next”Toggle whether Previous and Next buttons are shown. This step matters because Previous / Next is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Showprevnext Input, and understanding that context makes the next action easier to repeat in your own project.
First / Last
Section titled “First / Last”Toggle whether First and Last buttons are shown. This step matters because First / Last is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Showfirstlast Input, and understanding that context makes the next action easier to repeat in your own project.
Labels
Section titled “Labels”Customize labels for the paging controls. This step matters because Labels is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Prevlabel Input, and understanding that context makes the next action easier to repeat in your own project.
State manager (optional)
Section titled “State manager (optional)”Optionally persist paging state using a state manager.
Use State Manager
Section titled “Use State Manager”Enable this if you want paging state reflected in a state manager (useful for URL sync and persistence).
State Manager
Section titled “State Manager”The state manager selection defines where paging state and offset are stored. This step matters because State Manager is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Statemanager Input, and understanding that context makes the next action easier to repeat in your own project.
Generate
Section titled “Generate”When you’re happy with the settings, generate the pagination component.
Selecting Ok inserts the generated pagination component into the page. This step matters because Ok is part of Popup Bootstrap5paginggenerator Button Ok, and understanding that context makes the next action easier to repeat in your own project.
Cancel
Section titled “Cancel”Selecting Cancel closes the dialog without inserting anything. This step matters because Cancel is part of Popup Bootstrap5paginggenerator Button Cancel, and understanding that context makes the next action easier to repeat in your own project.
Next steps
Section titled “Next steps”Continue with other generator tours, or return to the Bootstrap tours index.