If you have a UI where it doesn't make sense to place all controls in a single container (or set of containers), you can place individual UI Components manually outside Paginator's configured container(s).
For this example, we'll create a table from a data array and render a few controls into the generated <tfoot> using the Paginator's template. We'll also subscribe to the Paginator's render event with a callback that renders a CurrentPageReport UI Component into a <div> above the table.
In this example, we'll be working with a data array stored in YAHOO.example.data.inventory.
We'll start with two empty divs:
To populate div#tbl we write some application code to generate a table with a tfoot. The table will be wrapped in an object with an API including a showPage(pageNumber) method.
Create a Paginator and a method to subscribe to its changeRequest event. Note the configured container is a generated <div> and is not yet on the page. We'll append this to the <tfoot> when it is available.
To synchronize the rendering of all UI Components, we subscribe to the Paginator's render event with a callback to add a CurrentPageReport into div#report.
UI Components' render methods take a string seed usually used by Paginator to guarantee uniqueness of generated IDs when rendering into multiple containers. When rendering them manually, you'll need to provide your own seed. If you render more than one of the same type of UI Component, respective render calls must be passed different seeds.
Render the table and the Paginator. The CurrentPageReport will be rendered in response to the Paginator's emitted render event.
The Paginator was configured to use a <div> created off the page DOM, so the template controls are not visible until the <div> is then added to the table's <tfoot>.
Some convenience methods were created to aid in the DOM structure assembly.
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings