======The Pager template====== {{page>:uwa_templates#available templates}} =====Description===== This template is intended for navigation between different pages. =====Preview===== {{http://nvmodules.typhon.net/templates/nv-pager/nv-pager.png}} =====Code==== ====Defined CSS classes====


nv-pager
prev
next
back
numericpages
page
selected

====Using JavaScript==== You can build the pager dynamically using the ''UWA.Controls.Pager'' object. The object has to be set to a few data sources using a JSON object as the argument for ''Pager()''.


var PagerSample = {};

PagerSample.display = function(json) {
  var pager = new UWA.Controls.Pager(
    {
    module: widget,
    limit: widget.getValue('limit'),
    offset: widget.getValue('offset'),
    dataArray: json
    }
  );
}

In this sample, the data sources are: * ''module'': must be a reference to the widget. Most of the time, widget will suffice. * ''limit'': must be set to the number of displayed items. Here, we retrieve the content of a Range preference. * ''offset'': must be set to the number of the page itself (starting with zero). Here, we make use of a hidden Text preference. * ''dataArray'': must be set to a JSON array returned by (or adapted from) the feed source. Here is what the preferences look like:

In order to deal with page-changing, we then set an ''onChange'' event on the ''Pager'' object, and use it to update the widget accordingly - for instance, setting the new value of the offset preference, and re-displaying the whole content based on that new offset:


// in PagerSample.display()
pager.onChange = function(newOffset) {
  widget.setValue('offset', newOffset);
  PagerSample.display();
}

This ''pager.onChange'' code will be placed upon an empty ''div'' tag with a unique class (here, ''paging''), placed at the bottom of the widget, using code like this:


// still in PagerSample.display()
var pagerContainer = UWA.$element(
  widget.body.getElementsByClassName('paging')[0] );
pagerContainer.setContent( pager.getContent() );

Remember that if you are using a ''for()'' loop to parse through the data to be displayed, in must be adapted to the ''offset'' value, which will decide where to start parsing the data. For instance, if you had this before the implementation of the Pager:


for (var i = 0; i < json.length; i++ ) { ... }

...then you should update it to something like this:


for (var i = widget.getValue('offset'); i < json.length; i++ ) { ... }

Lastly, since the offset is stored as a preference, we have to reset it at each reloading, just in case.


PagerSample.onLoad = function() {
  widget.setValue('offset', 0);
  UWA.Data.getJson(
    'http://twitter.com/statuses/public_timeline.json',
    PagerSample.display
  );
}

====Using XHTML+CSS==== You can also build your pager statically using the defined CSS classes:



	previous
	next
	back



	previous
	next
	
		1
		2
		3
		4