YUI recommends YUI 3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
Yahoo! UI Library > paginator > RowsPerPageDropDown.js (source view)
(function () {
var Paginator = YAHOO.widget.Paginator,
l = YAHOO.lang;
/**
* ui Component to generate the rows-per-page dropdown
*
* @namespace YAHOO.widget.Paginator.ui
* @class RowsPerPageDropdown
* @for YAHOO.widget.Paginator
*
* @constructor
* @param p {Pagintor} Paginator instance to attach to
*/
Paginator.ui.RowsPerPageDropdown = function (p) {
this.paginator = p;
p.createEvent('rowsPerPageOptionsChange');
p.createEvent('rowsPerPageDropdownClassChange');
p.subscribe('rowsPerPageChange',this.update,this,true);
p.subscribe('rowsPerPageOptionsChange',this.rebuild,this,true);
p.subscribe('destroy',this.destroy,this,true);
// TODO: make this work
p.subscribe('rowsPerPageDropdownClassChange',this.rebuild,this,true);
};
/**
* Decorates Paginator instances with new attributes. Called during
* Paginator instantiation.
* @method init
* @param p {Paginator} Paginator instance to decorate
* @static
*/
Paginator.ui.RowsPerPageDropdown.init = function (p) {
/**
* Array of available rows-per-page sizes. Converted into select options.
* Array values may be positive integers or object literals in the form<br>
* { value : NUMBER, text : STRING }
* @attribute rowsPerPageOptions
* @default []
*/
p.setAttributeConfig('rowsPerPageOptions', {
value : [],
validator : l.isArray
});
/**
* CSS class assigned to the select node
* @attribute rowsPerPageDropdownClass
* @default 'yui-pg-rpp-options'
*/
p.setAttributeConfig('rowsPerPageDropdownClass', {
value : 'yui-pg-rpp-options',
validator : l.isString
});
};
Paginator.ui.RowsPerPageDropdown.prototype = {
/**
* select node
* @property select
* @type HTMLElement
* @private
*/
select : null,
/**
* Generate the select and option nodes and returns the select node.
* @method render
* @param id_base {string} used to create unique ids for generated nodes
* @return {HTMLElement}
*/
render : function (id_base) {
this.select = document.createElement('select');
this.select.id = id_base + '-rpp';
this.select.className = this.paginator.get('rowsPerPageDropdownClass');
this.select.title = 'Rows per page';
YAHOO.util.Event.on(this.select,'change',this.onChange,this,true);
this.rebuild();
return this.select;
},
/**
* Select the appropriate option if changed.
* @method update
* @param e {CustomEvent} The calling change event
*/
update : function (e) {
if (e && e.prevValue === e.newValue) {
return;
}
var rpp = this.paginator.get('rowsPerPage'),
options = this.select.options,
i,len;
for (i = 0, len = options.length; i < len; ++i) {
if (parseInt(options[i].value,10) === rpp) {
options[i].selected = true;
}
}
},
/**
* (Re)generate the select options.
* @method rebuild
*/
rebuild : function (e) {
var p = this.paginator,
sel = this.select,
options = p.get('rowsPerPageOptions'),
opt_tem = document.createElement('option'),
i,len;
while (sel.firstChild) {
sel.removeChild(sel.firstChild);
}
for (i = 0, len = options.length; i < len; ++i) {
var node = opt_tem.cloneNode(false),
opt = options[i];
node.value = l.isValue(opt.value) ? opt.value : opt;
node.innerHTML = l.isValue(opt.text) ? opt.text : opt;
sel.appendChild(node);
}
this.update();
},
/**
* Removes the select node and clears event listeners
* @method destroy
* @private
*/
destroy : function () {
YAHOO.util.Event.purgeElement(this.select);
this.select.parentNode.removeChild(this.select);
this.select = null;
},
/**
* Listener for the select's onchange event. Sent to setRowsPerPage method.
* @method onChange
* @param e {DOMEvent} The change event
*/
onChange : function (e) {
this.paginator.setRowsPerPage(
parseInt(this.select.options[this.select.selectedIndex].value,10));
}
};
})();