Add Paginator functionality and UI to display all records.
Create a new UI component under YAHOO.widget.Paginator.ui
to display a link. When the link is clicked, the Paginator's rowsPerPage
is set to its totalRecords
and the link replaced with a span.
Caveat: If the RowsPerPageDropdown
is included in the Paginator template, it will not be able to match the new custom value of rowsPerPage
from the rowsPerPageOptions
array.
* - the code for this example is displayed at the bottom of the page.
Extend the RowsPerPageDropdown
component to look for a rowsPerPageOptions entry "all" and respond to choosing that value by setting rowsPerPage
to totalRecords. An additional option is created to use when the rowsPerPage
does not match an entry from the rowsPerPageOptions
array.
Caveat: If rows are added to the DataTable, a second page will be created since totalRecords
will be incremented, but rowsPerPage
left at the previous value of totalRecords
.
* - the code for this example is displayed at the bottom of the page.
Set the last value in rowsPerPageOptions
to a very high number, using option text "All". Choose a number that is very unlikely to be less than the number of records you'll be displaying, or at least a number so high that the impact on the browser to display so many records would be preventative anyway.
Caveat: The chosen number could be less than the true totalRecords
. Measures can be taken to ensure the value is greater, including adjusting rowsPerPageOptions
accordingly from within a subscriber to the DataSource's responseParseEvent. Pragmatically speaking, this should be unnecessary.
* - the code for this example is displayed at the bottom of the page.
Create a new XRowsPerPageDropdown
ui component that has specific handling for an 'all' option. Note, rather than defining a new component, this method could be used to replace the existing ui.RowsPerPageDropdown
component.
Caveat: The XRowsPerPageDropdown
component breaks the decoupling pattern between Paginator
and ui components by directly setting the Paginator
's rowsPerPage attribute.
* - the code for this example is displayed at the bottom of the page.