Spry

Create Paged View data set navigation

When you create a Paged View data set and display the data on a Spry page, you might also want to add navigation to the page so that users can page through the data. The following examples show two common ways of navigation and their corresponding code:


<p spry:region="pvInfo" spry:repeatchildren="pvInfo">
	<a spry:if="{ds_CurrentRowNumber} != {ds_RowNumber}" href="#" onclick="pvCities.goToPage('{ds_pageNumber}'); return false;">{ds_pageNumber}</a>
	<span spry:if="{ds_CurrentRowNumber} == {ds_RowNumber}" class="currentPage">{ds_pageNumber}</span>
</p>

<p spry:region="pvInfo" spry:repeatchildren="pvInfo">
 <a spry:if="{ds_CurrentRowNumber} != {ds_RowNumber}" href="#" onclick="pvCities.goToPage('{ds_pageNumber}'); return false;">{ds_pageFirstItemNumber}-{ds_pageLastItemNumber}</a>
 <span spry:if="{ds_CurrentRowNumber} == {ds_RowNumber}" class="currentPage">{ds_pageFirstItemNumber}-{ds_pageLastItemNumber}</span></p>

You create a Paged View data-set navigation by creating a special Paged View Info data set that’s linked to the original Paged View data set. The Paged View Info data set contains a number of special data references that you use to create navigation.

 To create the Paged View Info data set, add another variable to the constructor script tag, as follows: 
<script language="JavaScript" type="text/javascript" src="includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="includes/SpryPagedView.js"></script>
<script language="JavaScript" type="text/javascript">
    var ds1 = new Spry.Data.XMLDataSet("myXML.xml","xpath");
    var pv1 = new Spry.Data.PagedView(ds1 ,{pageSize: 20});
    var pvInfo = pv1.getPagingInfo();
</script>

In the preceding example, the name of the new data set is pvInfo, and it is based on the first Paged View data set, pv1.

After you’ve created the Paged View Info data set, you can use any of the special data references to create a navigation as in the preceding examples. Following is a list of available data references.

Data reference

Description

{ds_pageNumber}

The number of the page on which the data appears.

{ds_pageSize}

The number of rows of data per page.

{ds_pageCount}

The total number of pages in the data set.

{ds_pageFirstItemNumber}

The item number that is the first row of data for that page. If pages have 10 rows per page, item 11 is the first item number on page 2 and 21 is the first item number on page 3.

{ds_pageLastItemNumber}

The item number that is the last row of data for that page. If pages have 10 rows per page, item 20 is the last item number on page 2 and 30 is the last item number on page 3.

{ds_pageItemCount}

The actual number of rows of data on the current page. This number is generally the same as {ds_pageSize} except for instances when the last page of the data has less than a full page of data.

{ds_pageTotalItemCount}

The sum of all the rows on all pages.
Note: Because the Paged View Info data set is a real data set, it still contains all of the normal built-in data references, like {ds_RowID} and {ds_currentRowNumber}, in addition to the data references listed.