Spry

Create a Spry Paged View data set

  1. Open a new or existing HTML page.
  2. Make sure that you’ve linked the Spry data library files to the page and created a data set. (You can use any of the data set types that Spry supports.)

    For example, you might create an XML data set, ds1, with the following code:

    <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">
    var ds1 = new Spry.Data.XMLDataSet("myXML.xml","xpath");
</script>

    For more information, see the individual sections on creating data sets.

  3. Link the SpryPagedView.js file to the page by inserting the following script tag after the other data set script tags in the head, 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>

    The SpryPagedView.js file is in the same includes folder as all of the other Spry JavaScript files. For more information, see the Preparing your files sections in the individual sections on data sets.

  4. Create the Paged View data set by adding a new constructor variable, after the primary data set constructor variable, as follows: 
    <script language="JavaScript" type="text/javascript">
    var ds1 = new Spry.Data.XMLDataSet("myXML.xml","xpath");
    var pv1 = new Spry.Data.PagedView( ds1 ,{pageSize: 20});
</script>

    The value of the constructor’s first parameter is the name of the primary data set, in this case, ds1. The second parameter in the constructor is optional, and in this example specifies how many rows to display per page. In the example, the Paged View data set displays 20 rows of data per page.

    Note: Spry uses 10 rows as the default if you don’t set the pageSize option.

    The completed example code might look as follows:

    <head>
...
<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});
</script>
...
</head>
  5. After the Paged View data set is created, you can use a Spry region to display the data from the data set on the web page. The following Spry construct displays 20 rows of data, in this case, from the primary XML data set: 
    <div spry:region="pv1" spry:repeatchildren="pv1">
{data}
</div>

    The Paged View data set uses the same data reference names ({data} in the example above) as the primary data set.