The Paginator Control allows you to reduce the page size and render time of your site or web application by breaking up large data sets into discreet pages. Paginator addresses the navigation aspect of chunked content, offering a set of controls that it can render into your UI to allow users to navigate through logical sections of local or remote data

This example demonstrates the creation of a pagination widget with a template that provides statistics and navigable links.

Source Code

<div control="yui_paginator[rowsPerPage=5,totalRecords=100,initialPage=3]">
	<h5>5 Per Page, 100 Total Records, Start at 3</h5>
	<p>{CurrentPageReport}</p>
	<p>{PreviousPageLink} {PageLinks} {NextPageLink}</p>
</div>

In this sample, a paginator with the name of 'myPaginator' is created with two initial properties. The function argument of createControl is called when the widget renders and the second page is selected.

Create the control…

App.createControl(
	'myPaginator',
	'yui_paginator',
	{
		rowsPerPage  : 20, 
		totalRecords : 250
	},
	function() {
 
		this.page(1);
	}
);

Get the handle to an instance of the control…

App.getControl('myPaginator','yui_paginator',function()
{
	this.rowsPerPage(20);
	this.page(2);
	this.totalRecords(250);
});

The paginator control is made up of an identifiable div containing miscellaneous layout markup. This layout markup should contain string tokens that will be supplanted for values when the widget gets rendered.

{FirstPageLink}, {LastPageLink}, {PreviousPageLink}, {NextPageLink}, {PageLinks}, {CurrentPageReport}, {RowsPerPageDropdown}

The control tag on the div indicates what kind of widget the div will become. The widget identity can accept the following initial parameters…

Initial options supported by the widget.

Functions either accept a single argument such as an integer or a string, otherwise they accept a one dimensional object literal. Any function that can be called as an action accepts the same parameters but in the action parameter format. In some cases, data does not need to be passed in from an action directly, because the action is invoked from a message delivery and that message will contain the parameters. For example…

this.update({ rowsPerPage: 20, page: 3, totalRecords: 250 });

is equivalent to…

<div control="yui_paginator" id="myPaginator"
	on="l:loadMe then update[rowsPerPage=20, page=3, totalRecords=250">
</div>