Paging data in Sunbox dataview

The Sunbox dataview web part has the default mechanism for paging one or more data sources. This article is continuation of Simple displaying list items and she shoes how to use paging in Sunbox dataview.

The paging work only if your data source under the following condition:
1. Paging enabled in data source settings;
2. Number of loaded list items less than total number of list items in the data source.

Before activating paging feature on data source we need to decide: what the dynamic part of our markup (part of displaying list items markup) and where will be paging control (determine the container for paging control).
I modified the previous XSL template as is:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:template match="/">
        <div>
          <h3>Latest news:</h3>
          <div id="news-items">
            <xsl:for-each select="/response/News/Rows/Row">
              <a href="Lists/News/DispForm.aspx?ID={ID}">
                <xsl:value-of select="Title" />
              </a>
              <p class="news-announcement">
                <xsl:value-of select="Announcement" />
              </p>
            </xsl:for-each>
          </div>
          <div id="news-pager">
          </div>
        </div>
	</xsl:template>
</xsl:stylesheet>


I have been added two div's:
  1. <div id="news-items">, which wrapping the dynamic part of markup;
  2. <div id="news-pager"> - empty div, which will contains pager control (at the bottom of markup.

Save the template. And go to edit News data source. Goto paging tab and choose the paging type. For example I choose "Replacement". In Content container id we need to input first div ID, at the Pager container id - second div ID. "Pager link title" we can specify as we want:

paging-1.png

Press "Save" and Apply.

The second condition for paging in my case is ok, because my News list has the 65 list items. Number of loaded items is 5 (row limit in data source settings, 5 < 65).

Now news looks like:

paging-2.png

If I click on "Next..." link the next page of data will be shown:

paging-3.png

You can change pager types and look on it.

What happens?

When you clicking on pager link - Sunbox dataview query (asynchronous, Ajax) a new page for specified data source. When data is loaded - the web part concatenate markup, depending on your specified div's ID and update (replace or add) data in your markup.

This article is sample - how to easy you can make ajax paging of data with Sunbox dataview.

Read more: Debugging

Last edited Feb 8, 2012 at 8:34 AM by Bukharin, version 5

Comments

No comments yet.