Use Spry to Page Forward and Backward Through Records - A Simple Tutorial

In mid-December, Adobe released Spry 1.4 (see: Spry is Adobe's ajax framework, enabling developers to build web pages with dynamic regions. Shortly before Christmas, the Spry developers posted a SpryPagedView JavaScript class and a sample of how to use the class. The SpryPagedView class provides the capability to page forward and backward through a Spry DataSet.

The Adobe sample using the SpryPagedView class is available here: Adobe's excellent sample include additional Spry features (filtering, master-detail data sets). I wanted to create my own sample and tutorial that just focused on using the SpryPagedView class to page through a DataSet. You can view my sample here: /spry/pagedDataSet/testpaging.cfm.

You must include the Spry JavaScript classes in your head section:

script type="text/javascript" src="xpath.js">
script type="text/javascript" src="SpryData.js"></script>
script type="text/javascript" src="SpryPagedView.js"></script>

The three JavaScript classes above are the ones you need to create a DataSet and page through the records in the DataSet.

Next you need to create a DataSet (for more information on how to create a Spry DataSet see the Spry section of my blog) and a paged-enabled view of that DataSet.

script type="text/javascript">

//create a basic Spry DataSet

var dsConsultants = new Spry.Data.XMLDataSet("ConsultantSearchService.cfc?method=getAllNamesXML", "dataset/row");

//create a page-enabled view of the Spry DataSet

var pvConsultants = new Spry.Data.PagedView(dsConsultants, { pageSize: 12 });


The PagedView constructor takes the DataSet name as the first argument and also has three optional arguments. One of the optional arguments is how many records do you want displayed per page. In this example, I set the pageSize value to 12. For a complete list of the optional arguments and all the functions available when using class SpryPagedView, see the Adobe sample at

The next block of code sets up the buttons that the user can click on to page through the DataSet.

<!-- BEGIN PagedView Controls -->
<p style="text-align:center">
    <input type="button" value="First Page" onclick="pvConsultants.firstPage();" />
    <input type="button" value="Prev Page" onclick="pvConsultants.previousPage();" />

    <input type="button" value="Next Page" onclick="pvConsultants.nextPage();" />
    <input type="button" value="Last Page" onclick="pvConsultants.lastPage();" />

The click event for each button calls a specific SpryPagedView function. For example if the user clicks on the "Next Page" button, the SpryPagedView object I created and named pvConsultants will call the nextPage() function. This will cause the next 12 records to be displayed in the DataSet's region on the page.

The next block of code uses some of the data references that the DataSet makes available to let the user know which page of data he is on, and how many total pages of data there are. The spry:if checks that we actually have rows to display.

<!-- BEGIN PagedView Info Section -->
<div spry:region="pvConsultants">
    <p spry:if="{ds_UnfilteredRowCount} > 0">Page {ds_PageNumber} of {ds_PageCount} - Consultants {ds_PageFirstItemNumber} - {ds_PageLastItemNumber} of {ds_UnfilteredRowCount}</p>
    <p spry:if="{ds_UnfilteredRowCount} == 0">No matching data found!</p>

Lastly, you use a normal spry:region and spry:repeat to display the records in the DataSet. Note the value for the spry:region and spry:repeat attributes is the SpryPagedView DataSet, pvConsultants. When the user clicks on one of the buttons above, this is the Spry:Region that is updated with the records for that page of the DataSet.

<!-- BEGIN Paged Display Section -->
<!--Note the name of the PagedView then the name of the DataSet as the value for spry:region-->
<div class="docBlock" spry:region="pvConsultants">
<div spry:state="loading" id="notification2">Loading consultants, please wait ...</div>
    <table cellpadding="5">
            <th onClick="dsConsultants.sort('FIRST_NAME','toggle');">First Name</th>
            <th onClick="dsConsultants.sort('LAST_NAME','toggle');">Last Name</th>

            <th onClick="dsConsultants.sort('CITY','toggle');">City</th>
            <th onClick="dsConsultants.sort('EMAIL','toggle');">Email</th>

        <tr spry:repeat="pvConsultants">
            <td><a href="mailto:{EMAIL}">{EMAIL}</a></td>


The Adobe sample demonstrates additonal capabilities of the SpryPagedView class and also shows you how to filter the records in a paged DataSet. I hope this brief tutorial on how to use the SpryPagedView class will make it easier for you to understand the more complex sample provided by Adobe. Adobe is doing a wonderful job with Spry, making it easy for developers to include ajax functionality. I look forward to an "official" release of the Spry framework, along with good documentation on how to use the many Spry classes and their functions.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Who is Sandra BuXXXXXX?
# Posted By Phillip Senn | 12/27/06 11:26 AM
She is Joel DiXXXXXX's wife.
# Posted By Bruce | 12/27/06 11:47 AM
Why I can't view it in IE7? It works in netscape and firefox.
# Posted By Izwan | 8/5/07 7:33 AM
When I get a chance, I'll test it on IE 7. It worked on IE 6.
# Posted By Bruce | 8/5/07 11:45 AM
sorry. its works now.. just totally my fault.

# Posted By Izwan | 8/5/07 1:24 PM
Thanks! I was having a little trouble making sense of Adobe's example, but this tutorial helped me finally get it.
# Posted By Lara | 11/8/07 9:44 PM
Why I can't view it in IE7? It works in netscape and firefox.
# Posted By buhar kazanlari | 1/23/08 9:17 AM
Good tutorial, finally i get to make good pagination along side with dynamic tables. Adobe samples tries to do too much in one page making it confusing.
# Posted By IsGoodStuff | 5/28/08 7:08 PM
Many thanks for the useful information guys.
# Posted By esanjor | 6/27/08 12:53 AM
Great info, thanks alot.
# Posted By plakali esanjor | 6/27/08 12:54 AM
I cannot get this to work with nestedxmldata sets. Does anyone else have this problem?
# Posted By Michael | 2/3/09 3:04 PM
thanks for your blog mate. Adobe's example is complicated for noobz like me.
# Posted By dhonnee | 3/4/09 12:20 PM
BlogCFC was created by Raymond Camden. This blog is running version Contact Blog Owner