In this example, we will add pagination to an ordered list. Some things to note:
<span>as well as in a
Random content with pagination controls embedded inline. Suspendisse vestibulum dignissim quam. Integer vel augue. Phasellus nulla purus, interdum ac, and here they are. and now back to random content habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
In this example, we'll be working with a data array stored in
All of Paginator's UI Components render inline elements, so you can include them almost anywhere. We'll create two container elements in our content, a
<span>, nested in a paragraph above the list, and a separate
<p> below it.
We'll generate the content by pulling a
slice of our data array and wrapping each item in
Create a Paginator, identifying the two containers
p_container. For fun, we use a custom
template and configure the included UI Components for extra customization.
Attach the content handler to the Paginator's
changeRequest event and make the appropriate changes in the handler to use the Paginator's passed state data.
render() the Paginator and, in this case, call the content generation code directly to initialize the list.
For this example, we've given the UI Components some special visual treatment. Outside of this, there is one CSS override that was necessary for the
Though the elements themselves are inline elements, the container is styled as
display: block by Sam skin. To keep the
<span> from breaking the normal rendering of the enclosing
<p>, we add the following CSS:
Note: Logging and debugging is currently turned off for this example.