The Pager template

This template is intended for navigation between different pages.

nv-pager
prev
next
back
numericpages
page
selected

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:

  <widget:preferences>
    <preference name="limit" type="range" label="Number of items to display" 
defaultValue="10" step="1" min="1" max="20" onchange="reParse" />
    <preference name="offset" type="hidden" defaultValue="0" />
  </widget:preferences>

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:

<div class="paging"></div>

// 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
  );
}

You can also build your pager statically using the defined CSS classes:

<div class="nv-pager">
	<a rel="prev" class="prev" href="#">previous</a>
	<a rel="next" class="next" href="#">next</a>
	<a rel="back" class="back" href="#">back</a>
</div>
 
<div class="nv-pager">
	<a rel="prev" class="prev" href="#">previous</a>
	<a rel="next" class="next" href="#">next</a>
	<span class="numericpages">
		<a class="page" href="#">1</a>
		<a class="page" href="#">2</a>
		<a class="page selected" href="#">3</a>
		<a class="page" href="#">4</a>
	</span>
</div>