ydn-js origin

YUI version 2.6.0

Creating custom UI Components for Paginator

Challenge

Add Paginator functionality and UI to display all records.

Solution 1

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.

Solution 2

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.

Solution 3

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.

Solution 4

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.

Markup and code for all solutions